如何在div元素内的h4标签中仅给'Sev'添加下边框、去除'ddd'下方的下划线

以下是三种常用的实现方式，可根据你的实际场景选择：

• 方案1：拆分文本加内联包裹（兼容性最好，推荐优先使用）
  将需要加下边框的Sev单独用span标签包裹，把边框样式移到span上即可，修改后的完整代码如下：

<div class = "container" style = "padding-left:10px">
  <h4 style="width:fit-content">
    <span style="border-bottom-style: solid;">Sev</span> ddd
  </h4>
</div>

原理：span是内联元素，宽度默认和自身内容宽度一致，因此边框只会出现在Sev下方。

• 方案2：背景渐变模拟边框（无需修改HTML结构）
  如果不能调整原有的HTML文本结构，可以用线性渐变模拟指定长度的下边框，代码如下：

<div class = "container" style = "padding-left:10px">
  <h4 style="
    border-bottom: none;
    width: fit-content;
    padding-bottom: 2px;
    background: linear-gradient(90deg, currentColor 2em, transparent 2em) no-repeat left bottom / 100% 1px;
  ">Sev ddd</h4>
</div>

可根据Sev的实际宽度调整代码中的2em参数，适配不同字号场景。

• 方案3：伪元素实现边框（无需修改HTML结构）
  也可以通过绝对定位的伪元素绘制指定长度的边框，代码如下：

<div class = "container" style = "padding-left:10px">
  <h4 style="width:fit-content; position: relative; border-bottom: none;">
    Sev ddd
    <style>
      h4::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 2em;
        height: 1px;
        background: currentColor;
      }
    </style>
  </h4>
</div>

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