テキスト（CSS）の後ろに、以下の背景/ボーダー

Question

私はCSSでこの効果を作成するために探しています：https://i.stack.imgur.com/zpzVC.png

私はこの効果が呼び出されるかわからないので、私は解決策を見つけることができませんでしたオンラインで私はそれを自分自身で残念ながら動作させることはできません。

異なるサイズの異なるタイトルで数回繰り返します。境界線は、最初の文字の半分から始める必要があります。私を助けることができる

？

Answer 1

これを達成するには、span要素に:after疑似クラスを使用します。

body { 
 
    background: #3E9CE2; 
 
    color: white; 
 
    font-family: sans-serif; 
 
} /* Just for looks */ 
 
    
 
h1 span { 
 
    position: relative; 
 
    display: inline-block;  
 
} 
 

 
h1 span:after { 
 
    position: relative; 
 
    display: block; 
 
    content: ""; 
 
    background: #DE2F2D; 
 
    z-index: -5; 
 

 
    height: 22px; 
 
    top: -19px; 
 
    left: 7px;  
 
}

<h1>This is our <span class="offset-background">showcase</span></h1>

位置と表示が（直接spanの下）:after要素が適切に配置されていることを確認し、テキストと同じ幅を有するspan自体の属性。

擬似要素は、テキストの背後に描画されることを確認するために、その高さと位置オフセット、および負のz-インデックスを定義する必要があります。

Answer 2

あなたが探していると思われるものの例です。私が使用した解決策は、テキストの周りのボックスをオフセットし、同じ量のテキストをマイナスにオフセットすることです。

h1 span { position: relative; display: inline-block; } 
 
.blue-sq{ 
 
    background-color:blue; 
 
    display:inline-block; 
 
} 
 
.offset-red{ 
 
    position:relative; 
 
    top:22px; 
 
    background-color:red; 
 
    height:18px; 
 
} 
 
.inner-text{ 
 
    position:relative; 
 
    top:-22px; 
 
    left:-6px; 
 
}

<div class="blue-sq"> 
 
    <h1>View our 
 
    <span class="offset-red"> 
 
     <span class="inner-text">showcase</span>  
 
    </span> 
 
     
 
    </h1> 
 
</div>