Can I apply a style to all pseudo selectors in CSS or Sass?
Short Answer: No, not directly
However, a mixin could be used to have a similar effect.
// Sets the style only for pseudo selectors
@mixin setLinkSelectorStyle {
&:hover, &:link, &:active, &:visited {
@content;
}
}
// Sets the style to pseudo selectors AND base default anchor
@mixin setLinkStyleAll {
&, &:hover, &:link, &:active, &:visited {
@content;
}
}
a {
color:red;
@include setLinkSelectorStyle {
color:gold;
}
}
a.specialLink {
@include setLinkStyleAll {
color:purple;
}
}
[Example using http://sassmeister.com/ compiled SASS]
a {
color: red;
}
a:hover, a:link, a:active, a:visited {
color: gold;
}
a.specialLink, a.specialLink:hover, a.specialLink:link, a.specialLink:active, a.specialLink:visited {
color: purple;
}
<a>Normal anchor, No href (:link won't work, but other selectors will)</a>
<hr />
<a href="#">Normal anchor</a>
<hr />
<a class="specialLink">Specific class (no href)</a>
<hr />
<a class="specialLink" href="#">Specific class</a>
The mixins will create a rule for all the pseudo selectors when the mixin is included on the anchor / class.
Removed old answer, look at history to see it.
U can do it like that:
&:before, &:after {
content: 'a';
}