僞對齊::在多行列表項後

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