CSS inset box-shadow with offset?

user_10626043 0
Viewed 486

My desired outcome is a headline element with a thick underline that is slightly offset from the left like so:

enter image description here

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.

css
3 Answers

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>

user_86203330

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>

user_48139130

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>

user_132669740
Related