Eiji Eiji - 6 months ago 19
CSS Question

CSS3: first letter, vertical-align: super and changed height

I want to create a simple list ( without images ).

First letter of last element in list should have "vertical-align: super;" style, but when I do this the height of paragraph is increasing.

#third::first-letter {
vertical-align: super;
}


How to fix it without knowing the font size and paragraph height ?

My fiddle

Answer

One possible option to move the ::first-letter vertically without affecting the height of the box, is to float the pseudo-element and give a negative margin-top to it:

Example Here

#third::first-letter {
    margin-top: -.5em;
    float: left;
}

* {margin:0;padding:0;}
html {font-size: 200%;}
#first {background-color:pink;}
#second {background-color:aqua;}
#third {background-color:lightgreen; margin-top: 1em;}

#third::first-letter {
    margin-top: -.5em;
    float: left;
}
<p id="first">My list:</p>
<p id="second">|-> not last element</p>

<p id="third">|-> last element</p>


However as @Alohci pointed it out in comments, in Firefox ::first-letter doesn't match the first character if the it is not a letter or digit.

Therefore, in this particular case where the first character is not a letter/digit but a pipe |, we'd better add that character by using ::before pseudo-element, so that we can style it properly:

Example Here

#third::before {
    content: "|";
    margin-top: -.5em;
    float: left;
}

*{margin:0;padding:0}
html {font-size: 200%;}
#first{background-color:pink;}
#second{background-color:aqua;}
#third{background-color:lightgreen; margin-top: 1em;}

#second::before,
#third::before {
    content: "|";
}

#third::before {
    margin-top: -.5em;
    float: left;
}
<p id="first">My list:</p>
<p id="second">-> not last element</p>

<p id="third">-> last element</p>

Comments