CSS inset box-shadow with offset? - css

Question

My desired outcome is a headline element with a thick underline that is slightly offset from the left like so:
I'm getting the underline to work with an inset CSS box-shadow, but I have no idea on how to offset it from the left so that it's not completely inline with the start of the h2 text.
html {
font-family: 'Roboto', sans-serif;
font-size: 62.5%;
// -ms-text-size-adjust: 100%;
// -webkit-text-size-adjust: 100%;
}
body {
word-wrap: break-word;
overflow-x: hidden;
}
h2 {
font-weight: bold;
font-size: 2rem;
line-height: 1.1;
}
h2 span {
box-shadow: inset 0 -1.0rem 0 0 #88DEB2;
padding-right: 1rem;
}
<h2><span>Incredible Pure Castile Soap</span></h2>
Happy for any hints on how to achieve this.

Answer 1

You are almost good, simply add a negative text-indent:
html {
font-family: 'Roboto', sans-serif;
font-size: 62.5%;
}
body {
word-wrap: break-word;
overflow-x: hidden;
}
h2 {
font-weight: bold;
font-size: 2rem;
line-height: 1.1;
padding-left: 1rem;
}
h2 span {
box-shadow: inset 0 -1.0rem 0 0 #88DEB2;
display:inline-block; /* this is needed for the trick */
text-indent: -1rem; /* here */
padding-right: 1rem;
}
<h2><span>Incredible Pure Castile Soap</span></h2>
A multiline solution with gradient
html {
font-family: 'Roboto', sans-serif;
font-size: 62.5%;
}
body {
word-wrap: break-word;
overflow-x: hidden;
}
h2 {
font-weight: bold;
font-size: 2rem;
line-height: 1.1;
padding-left: 1rem;
}
h2 span {
background:
linear-gradient(#88DEB2,#88DEB2)
bottom right/calc(100% - 1rem) 1rem
no-repeat;
padding-right: 1rem;
}
<h2><span>Incredible Pure Castile Soap</span></h2>

Answer 2

You can make use of the pseudo element ::after or ::before and control the offset/positioning using left or right. Code explained in comments.
html {
font-family: 'Roboto', sans-serif;
font-size: 62.5%;
// -ms-text-size-adjust: 100%;
// -webkit-text-size-adjust: 100%;
}
body {
word-wrap: break-word;
overflow-x: hidden;
}
h2 {
font-weight: bold;
font-size: 2rem;
line-height: 1.1;
width: max-content; /* Take the content width */
}
h2 span::after {
content: " "; /* Let us 'activate' the pseudo element */
display: block;
background: #88DEB2;
height: 15px;
position: relative;
top: -10px;
left: 5px; /* Control the misalignment */
z-index: -1; /* So that it appears underneath */
}
<h2><span>Incredible Pure Castile Soap</span></h2>

Answer 3

You can use a linear-gradient to fake an underline which should achieve this (see comments in code for details)
html {
font-family: 'Roboto', sans-serif;
font-size: 62.5%;
// -ms-text-size-adjust: 100%;
// -webkit-text-size-adjust: 100%;
}
body {
word-wrap: break-word;
overflow-x: hidden;
}
h2 {
font-family: serif;
font-weight: bold;
font-size: 2rem;
line-height: 1.1;
}
h2 span {
background-image: linear-gradient(transparent 50%, #88DEB2 50%); /* makes a linear gradient */
background-position: 5px 0; /* offsets it */
background-repeat: no-repeat; /* stops it from repeating */
padding-right: 5px; /* gives more space for the underline offset */
}
<h2><span>Incredible Pure Castile Soap</span></h2>