CSS3：第一个字母，垂直对齐：超级和改变高度

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 在 cmets 中指出的那样，在 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>

Answer 2

而不是negative margin-top，line-height 是一个更好的解决方案。使用line-height，字母下方没有空格。