What does an "&" before a pseudo element in CSS mean?
That's LESS, not CSS.
This syntax allows you to nest selector modifiers.
.clearfix {
&:before {
content: '';
}
}
Will compile to:
.clearfix:before {
content: '';
}
With the &
, the nested selectors compile to .clearfix:before
.
Without it, they compile to .clearfix :before
.
A nested &
selects the parent element in both SASS and LESS. It's not just for pseudo elements, it can be used with any kind of selector.
e.g.
h1 {
&.class {
}
}
is equivalent to:
h1.class {
}
Here is an SCSS/LESS example:
a {
text-decoration: underline;
@include padding(15px);
display: inline-block;
& img {
padding-left: 7px;
margin-top: -4px;
}
}
and its equivalent in CSS:
a {
text-decoration: underline;
@include padding(15px);
display: inline-block;
}
a img {
padding-left: 7px;
margin-top: -4px;
}