Search code examples
cssvertical-alignmentpseudo-element

Pseudo-Element: Vertical inline alignment

I want to use ::before to achieve some kind of inline prefix for a <span>-tag.
This Prefix should have the same dimensions (padding-top and padding-bottom) as the <span> but a different background-color.

When floating it to the left, it's 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 <span>-tags next to each other everything works but I want to use the pseudo-element since I only need one <span>-tag and the CSS is cleaner.

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

Solution

  • 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