html - 伪对齐::在多行列表项之后

Question

我想在每个列表项之后添加一个伪元素。

问题是我每个列表项有 2 行，我希望伪元素在最长的行(并不总是第二行)之后对齐，然后放置伪元素。

ul {
  list-style: none;
}
ul li {
  margin-top: 15px;
}
.title {
  background-color: #5BC8F7;
}
.title .first {
  display: block
}
.title::after {
  content: "pseudo";
  background-color: #FFBA10;
}

<ul>
  <li>
    <div class="title"><span class="first">Lorem ipsum dolor </span> sit amet.</div>
  </li>
  <li>
    <div class="title"><span class="first">Lorem </span>ipsum dolor sit amet.</div>
  </li>
</ul>

Here is a codepen with the code above

Here is the desired result

Answer 1

您无法使用 CSS 测量一行中的字符数量。您可以改用 JavaScript。这是一个 jQuery 示例，用于创建类似的结果，尽管它不完全是一个伪元素。

$('.title').each(function() {
var x = $(this).text().length;
var y = $(this).find('.first').text().length;
var highlight = '<span class="highlight">highlight</span>'

if((x-y) > y) {
    $(this).append(highlight)
}
else {
    $(this).find('.first').append(highlight)
} });

result