CSS "underline"テキスト部分

Question

"TEST"の下に表示されているのと同じ効果を得るために、テキストに「下線」を付ける方法はありますか？

私はspanでTESTをカプセル化しようとしたと絶対の追加：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

はこのような何かですか？

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 2

あなたは:afterてみました。それが正しい解決策です。以下のスニペットを参照してください。あなたが言及した、あなたは上の画像のように、そのborder下のスタイリングをしたいだけで、そのセクションにspan tagを追加するよう あなたは値

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

利用疑似セレクタ:beforeを変更することができます。

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>