Overflowing Underline While Being Responsive to Text Length

问题

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.

回答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>

回答2:

use <h1><span>This</span></h1> make effect in span and adjust red box to use padding to were's you want :

   h1 span {
      position: relative;
      font-size: 100px;
      font-weight: 300;
      margin: 0;
      padding:0 0 0 20px;
    }  
h1 span::before {
  content: "";
  background: red;
  height: .25em;
  position: absolute;
  bottom: .15em;
  z-index: -1;
  width: 100%;
  left: 0;
}

like: https://jsfiddle.net/bdmpqkme/1/

来源：https://stackoverflow.com/questions/48088314/overflowing-underline-while-being-responsive-to-text-length

标签

html

css

underline