垂直对齐小的绝对定位的::before 内容以使其基线与父文本对齐的最佳或正确方法是什么？
在此片段中，我希望“XL”与“Lorem ipsum”具有相同的基线。只是调整 top: 太脆弱了。
body {margin: 0 30px; position: relative}
p {background-color: lightblue}
p::before {content: "XL"; font-size: 75%; position: absolute; right: 100%; background-color: lightgray}<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in dictum purus. Etiam accumsan quam et turpis elementum, in tempor. </p>
</body>最佳答案
正确答案:使用line-height并使用 em .
当您想将文本基线用作 transform-origin 时，您遇到了一个经典示例。你的元素。我推荐this reading了解局限性。
此外，在您当前的解决方案中，您依靠最近的相对定位祖先的宽度来移动 :before .你真的不需要那个。您可以安全地将它留在当前位置(父级的左上角)，只需将其向左移动其自身宽度的 100%:
document.querySelector('input[type="range"]').addEventListener('input', function(){
document.body.style.fontSize = this.value + 'px'
})body {
padding: 24px 0 0 1em;
font-size: 18px;
}
p {
margin-top: 0;
background-color: lightblue;
}
p::before {
content: "XL";
position: absolute;
transform: translateX(-100%);
background-color: lightgray;
font-size: 75%;
line-height: 1.75em;
}
input[type=range] {
width: 80vw;
left: 10vw;
top: 0;
position: absolute;
}<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in dictum purus. Etiam accumsan quam et turpis elementum, in tempor. </p>
<input type="range" value="18" step=".01" min="10" max="84">初始答案(当我相信你只是想对齐底部时):
你需要给父position:relative;和 child :bottom: 0 :
body {padding: 0 30px; }
p {
background-color: lightblue;
position: relative
}
p::before {
content: "XL";
font-size: 75%;
position: absolute;
right: 100%;
background-color: lightgray;
bottom: 0;
}<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in dictum purus. Etiam accumsan quam et turpis elementum, in tempor. </p>
</body>超出范围:不要使用margin在 <body> .使用 padding相反。
关于css - 垂直对齐::before 的绝对定位内容以匹配父级的基线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52919896/