Question

我必须遵循以下代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

以下是我的问题的一个例子：

JSFiddle

Answer 1

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

＆＃13;

.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
}

＆＃13;

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

＆＃13;

使用多行文本对齐伪元素::之后

1 个答案: