CSS自定义下划线

Question

我尝试在文字中添加自定义的超高下划线。

它需要符合这种语法，所以我可以回到我的WYSIWIG编辑器中：

<p data-font-size="50px"><span style="letter-spacing:2px;">
  <span class="custom_one"><span style="color:#ffffff;">A software platform that makes 
  devices feel more human.</span></span></span>
</p>

这是我想要做的事情的照片：

Answer 1

这不是一个下划线，它是一个背景。您可以使用渐变：

＆＃13;

＆＃13;

.custom_one {
  background: linear-gradient(transparent 60%, #333 60%);
  font-size: 42px;
}

＆＃13;

<p data-font-size="50px" style="background-color: #000;"><span style="letter-spacing:2px;">
  <span class="custom_one"><span style="color:#ffffff;">A software platform that makes 
  devices feel more human.</span></span>
  </span>
</p>

＆＃13;

＆＃13;

＆＃13;

Answer 2

@villain或许这可以帮到你？

＆＃13;

＆＃13;

<p data-font-size="50px">
  <span style="letter-spacing:2px; background-color: gray">
    <span class="custom_one">
      <a style="color: white; text-decoration: none; border-bottom: 10px solid black;" >A software platform that makes 
  devices feel more human.
      </a>
    </span>
  </span>
</p>

＆＃13;

＆＃13;

＆＃13;