HTML中怎么给文本元素添加删除线-html教程-PHP中文网

仅用 text-decoration: line-through 不够，因删除线颜色浅、粗细不可控、会继承影响子元素；需配合 text-decoration-line、color 和 thickness 三属性协同设置。

html中怎么给文本元素添加删除线

直接用 text-decoration: line-through 是最快、最通用的做法，但仅靠它往往不够——颜色太淡、粗细不可控、继承行为容易误伤子元素，真要上线得补 CSS 或换方案。

为什么不能只写 `text-decoration: line-through`

这个声明确实能立刻出效果，但它有三个实际坑：

删除线默认是细灰线，在浅灰背景或小字号下几乎看不见
它会向下继承：比如给 <p></p> 加了该样式，里面嵌套的 <strong></strong> 或 <a></a> 也会被划掉，除非显式重置
无法单独调颜色或粗细——text-decoration-color 和 text-decoration-thickness 必须和 text-decoration-line 一起用才生效，缺一不可

示例（安全写法）：

p.deleted {
  text-decoration-line: line-through;
  text-decoration-color: #d32f2f;
  text-decoration-thickness: 2px;
}

`<del></del>` 标签要不要用？什么时候用？

要用，但不是“用了就完事”。<del></del> 的核心价值是语义——告诉浏览器、屏幕阅读器、爬虫“这段内容已被正式删除”，比如价格变更、条款修订、编辑痕迹。它的默认样式弱，必须配 CSS 才能视觉可见。

适合场景：文档修订历史、电商原价标记（配合 <ins></ins>）、法律文本删改
别用在纯交互反馈上（比如任务列表勾选后划掉），那属于状态变化，应由 JS 控制 class
IE8 及更旧版本不支持 <del></del> 的 CSS 伪类，如需兼容，得加 polyfill 或降级处理

正确写法：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

<del class="price-old">¥199</del><ins>¥99</ins>

对应 CSS：

.price-old {
  text-decoration: line-through;
  color: #9e9e9e;
}

动态添加/移除删除线（JS 场景）

用户操作触发的删除线（如待办列表完成标记），别用 innerHTML 拼 <del></del>，也别直接改 style.textDecoration——前者破坏 DOM 结构，后者难维护。

推荐做法：预定义 class（如 .strikethrough），用 element.classList.add() / .remove()
选中目标要精确：用 querySelector('.task-text') 比 parentNode.children[0] 更可靠
避免用 innerText 读写文本，改用 textContent 防 XSS 和布局抖动

典型代码片段：

function finishTask() {
  const textSpan = this.parentNode.querySelector('span.task-text');
  if (textSpan) {
    textSpan.classList.toggle('strikethrough');
  }
}

需要自定义删除线位置、角度或动画怎么办？

标准 text-decoration 不支持旋转、虚线、渐变色或 hover 动画。这时候得用 ::after 伪元素手动画线。

原理：文字容器设 position: relative，伪元素绝对定位覆盖其上
关键限制：伪元素宽度默认不随文字自适应，width: 100% 只对块级元素有效；行内元素需额外处理（如 display: inline-block）
动画只能作用于伪元素自身属性（transform、opacity），不能对 text-decoration 做 transition

最小可用示例：

.custom-strike {
  position: relative;
}
.custom-strike::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: #ff6b6b;
  transform: translateY(-50%);
}

真正容易被忽略的是语义起点：划掉一行字，到底是“编辑动作”“价格失效”还是“用户状态反馈”？选错标签或 class 名，后期重构时比改样式还费劲。