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

Question

我想创建一个简单的列表(没有图像)。
列表中最后一个元素的第一个字母应该有“vertical-align: super;”样式，但是当我这样做时，段落的高度正在增加。

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

不知道字体大小和段落高度如何解决？
My fiddle

Answer 1

移动 ::first-letter 的一个可能选项垂直而不影响盒子的高度，是 float 伪元素并给它一个负的margin-top:

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>

---

但是作为@Alohci在评论中指出，在 Firefox ::first-letter 中，如果第一个字符不是字母 或数字，则不匹配第一个字符。

因此，在第一个字符不是字母/数字而是管道 | 的特殊情况下，我们最好使用 ::before 添加该字符伪元素，以便我们可以正确地设置它的样式:

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>