CSS3：首字母，垂直对齐：高度和更改后的高度

Question

我想创建一个简单的列表（不包含图像）。
列表中最后一个元素的首字母应具有“ vertical-align：super;”；样式，但是当我这样做时，段落的高度正在增加。

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

如何在不知道字体大小和段落高度的情况下进行修复？
我的小提琴

Answer 1

在::first-letter不影响框的高度的情况下垂直移动垂直框的一种可能的选择是对float伪元素margin-top施加负值：

这里的例子

#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在注释中指出的那样，::first-letter如果Firefox 不是字母或数字，则在Firefox 中与第一个字符不匹配。

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

这里的例子

#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>