html - 将伪元素:: after与多行文本对齐

我必须遵循以下代码：

.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

最佳答案

您可以将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>

关于html - 将伪元素:: after与多行文本对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36427639/