Is it possible to use the :after CSS pseudo-element to offset alignment without actually inserting anything in content: "". It doesn't seem to render unless content is specified so just wondered whether this is possible or if there are any known workarounds.
As an example:-
.nav-primary li.level0 a:after {
content: "";
padding-right: 1px;
margin-left: -1px;
}
As you can see from the example, simply changing the colour of the content would not work in this instance as would still consume space affecting the offset.
It is possible to use an :after pseudo-element with the content property set to the empty string "", but not without setting it all (so that it has its initial value none, which means that the pseudo-element is not generated at all).
The reason why you do not see any effect is that your settings effectively cancel each other out. You set a negative left margin, shifting the element leftwards, but you set an equal amount of padding. The pseudo-element itself is empty and thus invisible, so all that matters is the space that it occupies.
This can be illustrated by drawing an outline. I’m using the value 10px instead of 1px for clarity:
.nav-primary li.level0 a:after {
content: "";
padding-right: 10px;
margin-left: -10px;
outline: solid red;
}<div class=nav-primary>
<ul>
<li class=level0><a href=foo>bar</a>xxx
<li><a href=foo>bar</a>xxx
</ul>
</div>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments