将伪元素 ::after 与多行文本对齐答案

【问题标题】：Align pseudo-element ::after with multiline text将伪元素 ::after 与多行文本对齐
【发布时间】：2016-04-05 22:06:26
【问题描述】：

我必须遵循以下代码：

.container {
  width: 150px;
  background-color: yellow;
}
a {
  font-size: 14px;
}
a:after {
  content: "\003e";
  font-size: 32px;
  font-weight: 700;
  padding-left: 10px;
}

<div class="container">
  <p>
    <a>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</a>
  </p>
</div>

我正在尝试将a::after 元素的水平中心基线与多行文本的最后一行对齐。

我尝试使用 flexbox，但这会将 ::after 元素与完整多行文本的水平基线而不是最后一行居中。

这是我的问题的一个例子：

JSFiddle

【问题讨论】：

您能否提供一张预计外观的图片？

标签： html css pseudo-element

【解决方案1】：

您可以将position:relative 和top:5px 添加到a::after

.container {
  width: 150px;
  background-color: yellow;
}
a {
  font-size: 14px;
}
a:after {
  content: "\003e";
  font-size: 32px;
  font-weight: 700;
  padding-left: 10px;
  position: relative;
  top: 5px; /* change the value to what fits you better */ 
  line-height:0
}

<div class="container">
  <p>
    <a>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</a>
  </p>
</div>

【讨论】：

这是我的问题的一个答案。作为奖励：是否可以调整最后一行和倒数第二行之间的间距，使其与其他行之间的间距相匹配？
我讨厌幻数。无论字体大小如何，任何解决方案都可以做到这一点。
@Paulie_D 你指的是哪个font-size？ a 还是 a::after 一个？
5px 的神奇数字就是我的意思。理想的解决方案应该没有数字，
我理解你，我也不是一个大粉丝，因为如果改变其他值，这可能会改变。回答你，我没有找到任何其他解决方案，可能在这里工作。