CSS“下划线”文字部分

Question

如何在文本下划线以达到与“测试”下相同的效果？

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

这是HTML

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

Answer 1

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

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

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

Answer 2

像这样吗

 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> 

Answer 3

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

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

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