在响应文本长度的同时溢出下划线

Question

我试图通过CSS模拟这种效果：

这是一个问题的原因是因为它需要可重复使用。红色下划线的大小应由文本长度决定，但也以可预测的方式溢出其容器，例如：

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

红色下划线应该在div的左边延伸10px，然后在文本本身溢出大约50px的右边。所有人都说，红线比文本本身宽+60像素。

如果不每次手动操作，我怎样才能达到此效果？我没有使用伪元素，并且盒子阴影不会在我需要时左右延伸。

Answer 1

伪元素是我的答案。在：after元素上设置z-index以使其位于父元素后面是一个巧妙的技巧。元素不能是块元素，但除此之外它似乎很简单。

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>

Answer 2

使用<h1><span>This</span></h1>在span中生效并调整红框以使用填充到你想要的地方：

   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;
}

喜欢：https://jsfiddle.net/bdmpqkme/1/

Answer 3

lalit bhakuni和JasonB上面提到的所有这些示例都可以很好地工作，但是仅当您在此带下划线的文本后面没有任何带有背景的部分时。

z-index：-1会将所需的行放在想要的文本后面，也放在任何其他父节的后面。如果这些父节中的任何一个有背景，则该行将被隐藏（在后面）。

不是很干净的其他解决方案，但是解决了我们所有问题的方法是在标题内添加一个额外的元素：

HTML

<div class="div-with-background">
  <h1><span>This</span></h1>
  <br />
  <h1><span>Cool</span></h1>
  <br />
  <h1><span>Effect</span></h1>
</div>

CSS

.div-with-background {
  background-color: #333;
}

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;
}

h1 > span {
  position: relative;
}

在这种情况下，我们甚至不需要使用z-index属性。