Hintergrund/Grenze hinter und unter Text (CSS)

Question

Ich suche diesen Effekt mit CSS zu erstellen: https://i.stack.imgur.com/zpzVC.png

Da ich weiß nicht, wie dieser Effekt genannt wird, habe ich eine Lösung zu finden, nicht in der Lage gewesen, online und ich kann es leider nicht alleine machen.

Der Effekt wird bei verschiedenen Titeln mit unterschiedlichen Größen mehrmals wiederholt. Die Grenze sollte auf der Hälfte des ersten Buchstabens beginnen.

Wer kann mir helfen?

Answer 1

Ich würde die Pseudoklasse :after auf dem Span-Element verwenden, um dies zu erreichen.

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>

Die Position und die Anzeigeattribute auf der span sich das :after Element sicher richtig positioniert ist (direkt unterhalb des span) und hat die gleiche Breite wie der Text.

Das Pseudo-Element muss seine Höhe und einen Positionsoffset sowie einen negativen Z-Index definieren, um sicherzustellen, dass es hinter dem Text gezeichnet wird.

Answer 2

Hier ist ein Beispiel für das, wonach Sie zu suchen scheinen. Die Lösung, die ich verwendet habe, besteht darin, eine Box um den Text herum zu versetzen und den Text um den gleichen Betrag zu verschieben.

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>