html - Overflowing Underline While Being Responsive to Text Length

Question

I'm trying to emulate this effect via CSS:

The reason this is an issue is because it needs to be re-usable. The red underline's size should be dictated by the text length, but also overflow its container in a predictable manner, e.g.:

<div>
    <h1>This</h1>
    <h1>Cool</h1>
    <h1>Effect</h1>
</div>

The red underline should extend outside the div by 10px on the left, and then also overflow the text itself by roughly 50px on the right. So, all told, the red line is +60 pixels wider than the text itself.

How can I achieve this effect without doing it manually each time? I've had no success with pseudo elements, and box-shadow won't extend on the left and right as I need it to.

Answer 1

Pseudo elements was the answer for me. Setting z-index on the :after element to get it positioned behind the parent element is a neat trick. The elements can't be block elements, but other than that it seemed straightforward.

html {
  min-height: 100%;
}

body {
  min-height: 100%;
  background: linear-gradient(to bottom, #0b122f 0%, #17457d 100%);
  padding: 20px;
}

h1 {
  position: relative;
  display: inline-block;
  color: #fff;
  font-family: sans-serif;
  font-size: 100px;
  font-weight: 300;
  margin: 0;
}

h1:before {
  content: "";
  background: red;
  height: .25em;
  width: calc( 100% + 60px);
  position: absolute;
  bottom: .15em;
  left: -10px;
  z-index: -1;
}

<div>
  <h1>This</h1>
  <br />
  <h1>Cool</h1>
  <br />
  <h1>Effect</h1>
</div>