如何让<li>元素内的text-decoration: line-through实现连续贯穿？

问题原因 #

你当前的.list__item是flex容器，内部的<span>作为独立flex项存在，text-decoration: line-through会分别作用在每个<span>元素上，元素之间的空隙会导致贯穿线断开。

解决方案：用伪元素模拟连续贯穿线 #

通过给列表项添加伪元素，生成一条覆盖整个列表项宽度的横线，实现连续的贯穿效果，同时保留flex布局的特性：

.list__item {
    display: flex;
    margin-bottom: 10px;
    width: 100%;
    position: relative; /* 为伪元素提供定位基准 */
}

.list__item::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: currentColor; /* 自动继承文字颜色 */
    transform: translateY(-50%); /* 让横线垂直居中对齐文字 */
}

补充说明 #

• 这个方法不受内部元素布局的影响，无论<span>之间有多少空隙，横线都会贯穿整个列表项的宽度。
• 如果需要调整线条的粗细或颜色，直接修改伪元素的height和background-color即可。

内容的提问来源于stack exchange，提问作者YoavKlein