Background / border behind and below text (CSS) - css

Question

I am looking to create this effect with css: https://i.stack.imgur.com/zpzVC.png
Since I don't know how this effect is called, I haven't been able to find a solution online and I can't make it work on my own unfortunately.
The effect repeats a few times on different titles with different sizes. The border should begin on the half of the first letter.
Who can help me?

Answer 1

I'd use the :after pseudo class on the span element to accomplish this.
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>
The position and display attributes on the span itself make sure the :after element is properly positioned (directly underneath the span) and has the same width as the text.
The pseudo element has to define its height and a position offset, as well as a negative z-index to make sure it's drawn behind the text.

Answer 2

Here is an example of what you seem to be looking for. The solution I used is to offset a box around the text and negatively offset the text the same amount.
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>