to7be to7be - 26 days ago 6
CSS Question

Pseudo-Element: Vertical inline alignment

I want to use

::before
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!

HTML

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


SCSS

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: http://codepen.io/to7be/pen/yVJYaW

Answer

Just removing the float: left makes it look good:

preview

CodePen: http://codepen.io/anon/pen/VmjvEQ

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;:

preview

CodePen: http://codepen.io/anon/pen/bBeVQJ