Skip to main content

How to declare a pseudo-element on component?

.component::beforeThe selector you want to insertThe element you want to style

Option 1

+component('.btn')
+register
+pseudo-element('before')

display: inline-flex
background-color: grey

+__________________________
+pseudo-element('before')
content: ''




.btn {
display: inline-flex;
background-color: grey;
}

.btn::before {
content: '';
}

More info: +pseudo-element, +register, +component, separator +___


Option 2 - with alias

+component('.btn')
+register
+pseudo-element('{icon}', 'before')

display: inline-flex
background-color: grey

+__________________________
+pseudo-element('{icon}')
content: ''




.btn {
display: inline-flex;
background-color: grey;
}

.btn::before {
content: '';
}

More info: +pseudo-element, +register, +component, separator +___