Question

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

1 个答案: