使用伪元素创建自定义删除线，文本换行时失效问题咨询

当然可以实现！原生的line-through确实不够灵活，尤其是当文本换行时很难自定义样式，下面给你两种实用的方案，都能完美适配换行文本：

方法1：背景渐变实现简洁自定义删除线 #

这种方法上手简单，能轻松控制删除线的颜色、粗细和垂直位置，完全适配换行场景。

.custom-strike {
  position: relative;
  display: inline; /* 可根据布局需求改为inline-block/block */
  /* 渐变参数：transparent是透明，中间的颜色和百分比控制删除线 */
  background: linear-gradient(to bottom, transparent 45%, #ff4444 45%, #ff4444 55%, transparent 55%);
}

调整技巧： #

• 改变#ff4444可以替换删除线颜色
• 调整45%和55%的数值：比如改成48%和52%，删除线会变细；数值差越大，线越粗
• 调整百分比的整体偏移：比如改成35%和45%，删除线会往上移

方法2：伪元素+box-decoration-break实现进阶样式 #

如果需要更复杂的删除线效果（比如虚线、阴影、双线），这种方案更适合，同样完美适配换行。

.custom-strike-2 {
  position: relative;
  display: inline;
}

.custom-strike-2::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #0099cc;
  transform: translateY(-50%);
  /* 核心属性：让伪元素跟随文本换行复制 */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone; /* 兼容Chrome/Safari等webkit浏览器 */
}

进阶玩法： #

• 改成虚线：给伪元素加border-style: dashed; background: transparent; border-top: 2px dashed #0099cc;
• 添加阴影：加box-shadow: 0 0 3px rgba(0,153,204,0.5);
• 调整垂直位置：修改top的值，比如top: 60%，删除线会往下移

这两种方案都能完美替代原生的line-through，根据你的样式需求选择就行～

内容的提问来源于stack exchange，提问作者Joe Lam