如何使不同<p>标签实现连续无中断的删除线效果

你当前的代码中，.price容器设置了text-decoration: line-through;，但因为两个<p>标签字体大小、行高不同，且用了align-items: end让元素底部对齐，导致各自的删除线位置错位，看起来是断开的。下面提供两种可靠的解决方法：

方法一：用伪元素创建统一删除线（推荐） #

这种方法不受子元素样式影响，能确保删除线始终连贯：

修改.price的CSS，移除text-decoration，添加绝对定位的伪元素来生成删除线：

.price {
  display: flex;
  align-items: end;
  position: relative; /* 为伪元素提供定位基准 */
}

.price::after {
  content: '';
  position: absolute;
  bottom: 50%; /* 调整此值可改变删除线的垂直位置 */
  left: 0;
  right: 0;
  height: 1px;
  background-color: lightgrey; /* 和文本颜色保持一致 */
  transform: translateY(50%); /* 微调垂直居中 */
}

方法二：调整子元素对齐与行高，让基线统一 #

通过对齐文本基线、统一行高，让容器的删除线自然连贯：

.price {
  display: flex;
  align-items: baseline; /* 改为基线对齐，替代end */
  text-decoration: line-through;
}

.prixunit {
  color: lightgrey;
  font-size: 20px;
  line-height: 1; /* 重置行高，避免干扰基线 */
}

.tnd {
  color: lightgrey;
  font-size: 13px;
  line-height: 1; /* 统一行高 */
  padding-left: 5px;
}

两种方法对比：方法一适配性更强，适合子元素样式可能变化的场景；方法二更简洁，适合样式固定的情况。

内容的提问来源于stack exchange，提问作者Karim Ben Anaya