HTML文字两侧如何加线？

在HTML中为文字两侧添加装饰线（如标题分隔线）主要通过CSS实现，以下是5种专业方法，兼顾兼容性与视觉效果：

方法1：伪元素 + Flex布局（推荐）

<style> .decorated-text { display: flex; align-items: center; gap: 15px; /* 文字与线的间距 */ } .decorated-text::before, .decorated-text::after { content: ""; flex: 1; /* 自动填充剩余空间 */ height: 1px; background: linear-gradient(90deg, transparent, #333, transparent); /* 渐变线 */ } </style> <div class="decorated-text">标题文字</div>

效果：

优点：响应式、可自定义渐变，现代浏览器首选方案。

方法2：背景渐变法

.text-with-lines { text-align: center; background: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent) center / 100% 1px no-repeat; padding: 10px 0; } <div class="text-with-lines">居中标题</div>

适用场景：纯色线条，需精确控制线条长度比例。

方法3：传统表格布局

<div style="display: table; width: 100%;"> <div style="display: table-cell; vertical-align: middle;"> <hr style="border-top: 1px dashed #ccc;"> </div> <div style="display: table-cell; white-space: nowrap; padding: 0 10px; text-align: center;">文字 </div> <div style="display: table-cell; vertical-align: middle;"> <hr style="border-top: 1px dashed #ccc;"> </div> </div>

优点：兼容IE8+，适合虚线等特殊样式。

方法4：Grid布局

.grid-text { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; } .grid-text::before, .grid-text::after { content: ""; border-top: 1px solid #e74c3c; } <div class="grid-text">响应式标题</div>

特点：代码简洁，适合复杂布局场景。

方法5：纯文本符号（应急方案）

<span style="color: #999;">――――</span> <span style="padding: 0 10px;">简易标题</span> <span style="color: #999;">――――</span>

适用场景：无CSS环境（如邮件模板），兼容性100%。

关键注意事项

1. 响应式适配：方法1/4自动适应容器宽度，方法2需用@media调整背景比例
2. SEO友好：确保文字使用语义化标签（如<h2>而非<div>）
3. 可访问性：为装饰线添加aria-hidden="true"避免读屏器识别
4. 性能优化：避免过度使用渐变（尤其移动端）

浏览器兼容方案

/* 兼容旧版浏览器 */ .decorated-text { display: -webkit-box; /* 旧版Android */ display: -ms-flexbox; /* IE10 */ } .decorated-text::before { -ms-flex-preferred-size: auto; /* IE10特殊处理 */ }

引用说明：CSS技术细节参考MDN Web Docs的伪元素指南和W3C的Flexbox规范，渐变实现依据CSS Images Module Level 4标准。

最终推荐：优先选择方法1（Flex+伪元素），平衡代码简洁性、视觉效果与兼容性，若需IE支持，可搭配方法3作为降级方案，实际效果可访问Codepen示例调试。