CSS“下划线"文字部分 [英] CSS "underline" text part

问题描述

我如何加下划线"文本以获得与测试"下相同的效果?

How can I "underline" text to get the same effect like you can see under "TEST"?

我试图将TEST封装在span中，并在position: absolute中添加一个绝对:after，但是我认为这不是正确的方法，并且无法获得预期的结果.

I tried to encapsulate TEST in a span and adding an absolute :after with position: absolute, but I think it's not the correct way and haven't been able to obtain the expected result.

这是HTML

<h1 class="white hero-text">
    <span class="thin">ALL THIS TEXT IS</span>
    <br>
    <span class="bold striked">A TEST</span>
</h1>

推荐答案

像这样吗?

body{
  background: #333;
  font-family: arial;
}

.hero-text{
  color: #fff;
  text-align: center;
}

.bold.striked{
  position: relative;
  color: #fff;
  text-align: center;
  width: 300px;
  margin: 0 auto;
  z-index: 2;
}

.bold.striked::before{
  content: "";
  height: 15px;
  width: calc(100% + 50px);
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  background: #4882d5;
  z-index: -1;
}

<h1 class="white hero-text">
    <span class="thin">ALL THIS TEXT IS</span>
    <br>
    <span class="bold striked">A TEST</span>
</h1>

这篇关于CSS“下划线"文字部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！