css设置文字中间的横杠
时间: 2025-02-06 13:53:57 浏览: 33
### CSS 实现文字中间添加横线效果
为了实现文字中间带有贯穿线的效果,可以使用 `text-decoration` 属性中的 `line-through` 值。然而,如果希望更精确控制线条的位置以及样式,则可能需要借助伪元素来创建自定义的贯穿线。
#### 使用 `text-decoration: line-through`
最简单的方法是直接应用 `text-decoration: line-through`:
```css
.strike-text {
text-decoration: line-through;
}
```
这种方法适用于基本需求,但无法调整线条的颜色、粗细或位置[^1]。
#### 利用伪元素实现更加灵活的文字贯穿线
对于更高精度的需求,可以通过组合 `::before` 或者 `::after` 伪类与绝对定位技术,在目标文本上绘制一条水平居中的直线:
```html
<div class="custom-strike">被划掉的文字</div>
```
```css
.custom-strike {
position: relative;
}
.custom-strike::after {
content: '';
display: block;
width: 100%;
height: 1px; /* 可调节 */
background-color: black; /* 自定义颜色 */
position: absolute;
top: 50%; /* 水平中心 */
transform: translateY(-50%); /* 细微修正垂直对齐 */
}
```
此方法允许开发者完全掌控这条虚拟“删除线”的外观特性,比如宽度、高度、颜色等参数都可以自由设定[^2]。
阅读全文
相关推荐


















