How to declare a pseudo-element on component?
.component::beforeThe selector you want to insertThe element you want to style
Option 1
- SASS
+component('.btn')
+register
+pseudo-element('before')
display: inline-flex
background-color: grey
+__________________________
+pseudo-element('before')
content: ''
- CSS
.btn {
display: inline-flex;
background-color: grey;
}
.btn::before {
content: '';
}
More info: +pseudo-element, +register, +component, separator +___
Option 2 - with alias
- SASS
+component('.btn')
+register
+pseudo-element('{icon}', 'before')
display: inline-flex
background-color: grey
+__________________________
+pseudo-element('{icon}')
content: ''
- CSS
.btn {
display: inline-flex;
background-color: grey;
}
.btn::before {
content: '';
}
More info: +pseudo-element, +register, +component, separator +___