to7be to7be - 3 months ago 20
CSS Question

Pseudo-Element: Vertical inline alignment

I want to use

to achieve some kind of inline prefix for a -tag.
This Prefix should have the same dimensions (padding-top and padding-bottom) as the but a different background-color.

When floating it to the left, its slightly shifted and creates a little white space above the pseudo-element. All approaches I found here on SO mentioned to set the
vertical-align: bottom
but it doesn't work.

If I place two -tags next to each other everything works but I want to use the pseudo-element since I only need one -tag and the CSS is cleaner.

Thanks in advance!


<span>Some text I want to have here.</span>


span {
background-color: #ebebeb;
padding: .5em .2em .5em .2em;

&::before {
content: "Prefix:\00a0";
background-color: #d1d1d1;
padding: .5em .2em .5em .2em;
float: left;

See Demo:


Just removing the float: left makes it look good:



Vertical alignment doesn't work on floated elements.

If you don't want that small little space on the left, you can do a margin-left: -2px;: