当前位置：首页 > 行业动态 > 正文

html文字在横线

admin
行业动态
2025-04-30
4648

使用CSS的text-decoration或border-bottom属性为文字添加

text-decoration属性

HTML中通过text-decoration属性控制文字装饰线样式，常见值包括：

underline：下划线（默认蓝色）
overline：上划线
line-through：贯穿文字的横线（删除线）
none：无装饰线

CSS属性	效果描述	示例代码
`text-decoration: underline;`	文字底部添加下划线	`<span style="text-decoration:underline">示例</span>`
`text-decoration: overline;`	文字顶部添加上划线	`<span style="text-decoration:overline">示例</span>`
`text-decoration: line-through;`	文字中间添加贯穿线	`<span style="text-decoration:line-through">示例</span>`
`text-decoration: none;`	移除链接等默认装饰线	`<a style="text-decoration:none">链接</a>`

特殊需求实现方案

自定义颜色/厚度的下划线

默认underline颜色与文本一致，可通过border实现自定义：

html文字在横线第1张

<span style="border-bottom: 2px solid red;">自定义下划线</span>

多条装饰线组合

可同时应用多个装饰样式（需空格分隔）：

<span style="text-decoration: underline overline;">复合装饰线</span>

伪元素实现独立横线

通过::before/::after创建不随文本移动的横线：

<span class="custom-line">文字</span>
<style>
.custom-line::after {
  content: "";
  display: block;
  border-top: 1px solid black;
  margin-top: 5px;
}
</style>

兼容性注意事项

特性	兼容范围	备注
`text-decoration`基础值	IE6+/全浏览器	低版本IE可能渲染异常
`border`实现下划线	全浏览器	会改变行高
伪元素装饰线	IE8+/现代浏览器	需注意清除浮动影响

常见问题与解答

Q1：如何修改贯穿线的颜色？
A1：原生line-through颜色与文本一致，需通过border或伪元素实现自定义颜色。

<span style="position:relative;color:red">
  <span style="position:absolute;top:50%;left:0;width:100%;border-top:1px solid blue;"></span>
  <span style="background:white;z-index:1;">彩色贯穿线</span>
</span>

Q2：为什么text-decoration:underline在移动端显示断续？
A2：部分移动端浏览器对长下划线会采用虚线优化渲染，可通过以下方式规避：