如何移除flex父元素内span标签的text-decoration下划线？

问题核心 #

当<p>标签设为display: flex并添加text-decoration: underline时，内部<span>用常规的text-decoration: none; display: inline-block;无法移除下划线——这是因为flex容器的下划线是在容器层面直接绘制的，而非通过继承传递给子元素，所以子元素的样式根本阻断不了它。

解决方案 #

方案一：精准控制下划线范围（推荐）

不给整个flex容器加下划线，把需要下划线的文本单独用标签包裹，只给这个标签设置下划线：

<p style="display: flex; gap: 10px;">
    <span style="text-decoration: underline;">This should have underline</span>
    <span>This should not have underline</span>
</p>

方案二：背景色覆盖（适用于固定背景色场景）

如果必须保留flex容器的下划线样式，可以给目标<span>设置与页面背景色一致的背景，并提升层级来盖住下划线：

<p style="display: flex; gap: 10px; text-decoration: underline;">
    This should have underline
    <span style="position: relative; z-index: 1; background-color: #ffffff;">This should not have underline</span>
</p>

为什么常规方案无效？ #

普通流布局里，父元素的text-decoration是继承属性，子元素用text-decoration: none就能覆盖；但flex/grid容器的text-decoration是直接画在容器画布上的，会穿过所有子元素，所以子元素的样式压根拦不住这条下划线。

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