Strikeout li元素

Question

我想知道如何在<li>元素上创建一个删除线。它需要具有特定的高度，与之前的行相同。我附上了菜单项目的图像。

我用李：之前做一个破折号，但我不知道如何找出三位一体的线。

Answer 1

这应该工作。我选择通过添加active CSS类将特定元素放在特定元素上，但这也可能是悬停，焦点或其他任何内容。

ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    max-width: 200px; /* for demo purpose only */ 
 
} 
 

 
li { 
 
    padding-left: 50px; 
 
    position: relative; 
 
    line-height: 30px; /* for demo purpose only */ 
 
} 
 

 
li:before { 
 
    content: ''; 
 
    height: 4px; 
 
    background-color: black; 
 
    width: 30px; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 50%; 
 
    /* fix alignment by upping the position of the strikeout by 50% of its height */ 
 
    transform: translateY(-50%); 
 
} 
 

 
li.active:before { 
 
    width: 100%; 
 
}

<ul id="footer"> 
 
    <li>projects</li> 
 
    <li class="active">books</li> 
 
    <li>news</li> 
 
    <li>about</li> 
 
    <li>contact</li> 
 
</ul>