在网页设计与内容呈现中,有时我们需要在特定的文字上添加一条贯穿中间的线条，这种效果常用于表示原价被划掉、任务已完成、或者单纯为了强调某种文本状态（如已失效），作为网站的核心内容管理者，理解如何在HTML中正确、优雅且符合标准地实现这一效果至关重要，这不仅关系到页面的视觉呈现，也影响着用户体验和搜索引擎对您网站专业性（Expertise）、权威性（Authoritativeness）和可信度（Trustworthiness）的评估。
实现文字中间的划线效果,核心在于CSS的应用，而非直接在HTML标签内添加特殊符号，HTML负责结构，CSS负责样式，这是现代Web开发的基本原则，下面介绍几种常用且可靠的方法：
使用 text-decoration: line-through (最常用且语义化)
这是最符合标准、语义最清晰且兼容性最好的方法，它明确表示文本被“删除”或“划掉”。
<p>原价：<span style="text-decoration: line-through;">¥199</span> 现价：¥99</p>
/* 更推荐使用外部或内部CSS */
.discounted-price {
text-decoration: line-through;
color: #999; /* 通常搭配灰色表示失效 */
}
- 优点:
- 语义明确： 浏览器和辅助技术（如屏幕阅读器）能理解其含义，通常会读出“删除线”或类似提示。
- 简单易用： 一行CSS即可实现。
- 兼容性极佳： 所有现代浏览器和绝大多数旧浏览器都完美支持。
- 缺点:
- 样式固定： 线条的样式（粗细、颜色、类型）主要由浏览器默认或继承的文本颜色决定，虽然CSS3允许一定程度自定义（
text-decoration-color,text-decoration-style,text-decoration-thickness），但部分旧浏览器支持有限，线条位置通常固定在文本的垂直中心偏下一点。 - 位置不可调： 无法精确控制线条在字母上下的具体位置。
- 样式固定： 线条的样式（粗细、颜色、类型）主要由浏览器默认或继承的文本颜色决定，虽然CSS3允许一定程度自定义（
使用 CSS 伪元素 (::before 或 ::after) 结合定位 (高度自定义)
当您需要对划线的样式（颜色、粗细、位置）进行更精细的控制时，伪元素是强大的工具。
<p>任务：<span class="strike-custom">购买食材</span> 已完成</p>
.strike-custom {
position: relative; /* 为伪元素的绝对定位建立参照 */
display: inline-block; /* 确保伪元素能正确覆盖行内文本宽度 */
}
.strike-custom::after {
content: ""; /* 必须，伪元素内容为空 */
position: absolute; /* 绝对定位到父元素内 */
left: 0; /* 从左到右覆盖 */
top: 55%; /* 关键！控制线条垂直位置，50%是绝对中间，可微调 */
width: 100%; /* 覆盖整个文本宽度 */
height: 2px; /* 线条粗细 */
background-color: red; /* 线条颜色 */
transform: translateY(-50%); /* 微调垂直居中，使线条中心点在top位置 */
}
- 优点:
- 极致自定义： 完全控制线条的颜色、粗细（
height）、类型（可用border-bottom代替background实现虚线等）、以及最重要的垂直位置（通过top值调整）。 - 不影响文本语义： 本身不添加特殊语义，纯粹视觉装饰。
- 极致自定义： 完全控制线条的颜色、粗细（
- 缺点:
- 代码稍复杂： 需要理解定位原理。
- 需父元素定位： 要求目标文本元素设置为
position: relative（或absolute,fixed）。 - 需行内块级： 目标元素通常需要
display: inline-block;确保宽度正确计算覆盖。 - 语义不明确： 屏幕阅读器无法感知这是删除线效果，仅当视觉装饰。
巧用 border-bottom 与定位 (模拟双线或特定位置线)
有时为了特殊设计（如模拟手写双删除线），可以组合使用边框和定位。
.double-strike {
position: relative;
display: inline-block;
}
.double-strike::before,
.double-strike::after {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 0; /* 利用边框产生线 */
border-bottom: 1px solid blue; /* 一条线 */
}
.double-strike::before {
top: 35%; /* 第一条线位置 */
}
.double-strike::after {
top: 65%; /* 第二条线位置 */
}
- 优点：
- 可实现特殊效果： 如双删除线、与文字有特定距离的线。
- 缺点：
- 最复杂： 代码量相对较大。
- 与伪元素法类似： 同样需要定位和行内块级，无特定语义。
选择哪种方法？专业建议与考量
- 首选
text-decoration: line-through： 在绝大多数表示“删除”、“失效”、“已完成”的场景下，这是最符合E-A-T原则的选择，它提供了内置的语义，确保信息能被所有用户（包括依赖辅助技术的用户）正确理解，体现了对可访问性的重视，这是专业性和可信度的关键指标，搜索引擎也倾向于识别这种标准化的标记，仅在默认样式无法满足精细设计需求时才考虑其他方法。 - 追求精细视觉控制选伪元素法： 当设计稿对线条的位置、颜色、粗细有严格要求，且该线条更多是装饰性而非核心语义（某些艺术标题中的效果）时，伪元素法提供了强大的灵活性，务必确保这种自定义不影响核心信息的可读性。
- 特殊效果选边框定位组合： 仅在需要双线等非常规效果时使用。
重要注意事项：
- 可访问性 (A11y)： 这是E-A-T中Trustworthiness的核心，如果划线表示文本状态改变（如删除、完成），强烈建议使用
text-decoration: line-through，使用伪元素或边框法时，应考虑通过ARIA属性（如aria-label）或邻近的可见文本来传达状态信息，<span class="strike-custom" aria-label="已过期">特惠活动</span>
- 不要滥用： 过多的删除线会影响页面整洁度和可读性，只在必要时使用。
- 颜色对比： 被划掉的文字颜色与背景、以及划线的颜色，仍需满足WCAG对比度要求，确保视力不佳的用户也能辨识。
- 浏览器测试： 特别是使用较新CSS属性（如
text-decoration-thickness）或复杂定位时，务必在不同浏览器和设备上测试效果。 - CSS类名语义化： 使用像
.line-through,.discounted,.completed这样的类名，比.strike1,.style2更利于代码维护和团队协作，也体现了专业性。
个人观点： 在HTML中实现文字中间线，技术本身并不复杂，关键在于理解每种方法背后的适用场景和潜在影响。text-decoration: line-through 因其语义明确和卓越兼容性，应作为表达“删除”或“完成”状态的首选方案，这是对用户和搜索引擎展现专业性与可信度的基础，视觉效果的极致追求应让位于信息的清晰传达和广泛可访问性，伪元素等技术是锦上添花的工具，而非替代语义化方案的捷径，始终将用户体验和标准符合度置于纯视觉效果之上，是构建长期成功网站的核心。
