CSS＆＃34;强调＆＃34;文字部分

Question

我怎样才能强调＆＃34;文本以获得相同的效果，就像你在＆＃34; TEST＆＃34;？

下看到的那样

我尝试将TEST封装在Student并添加绝对值：span之后，但我认为这不是正确的方法，并且无法获得预期的结果。

这是HTML

＆＃13;

＆＃13;

position: absolute

＆＃13;

＆＃13;

＆＃13;

Answer 1

你说你试过:after。这是正确的解决方案。请参阅下面的代码段。 您可以更改值

＆＃13;

＆＃13;

.striked {
  position: relative
}

h1 {
  text-align: center;
}

.striked:after {
  height: 50%;
  width: 150%;
  left: -25%;
  background: red;
  content: "";
  position: absolute;
  bottom: 0;
  z-index: -1
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

这样的东西？

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

如上所述使用伪选择器:before，并将span tag仅添加到您想要border底部样式的部分，如上图所示。

＆＃13;

＆＃13;

span{
  display:inline-block;
  position:relative;
}
span:before{
  content:"";
  width:100%;
  height:10px;
  background:yellow;
  position:absolute;
  bottom:3px;
  z-index:-1;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;