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