CSS：多行伪边框宽度

Question

我有一个包含伪元素控制下划线的文本元素。我想要实现的是，当该元素占据两行或更多行时，下划线应该与元素宽度相同，但现在它只占据了最后一行的宽度（见截图）。

我已经上传了一个 jsfiddle 来展示我的意思: https://jsfiddle.net/m6rmxuoy/1/

这里有两个例子: 一个是使用 display: inline 属性的 h2 元素:

.wrapper {
  width: 260px;

  h2 {
    position: relative;
    display: inline;

    background-color: yellow;

    &:after {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 80px;
      height: 3px;

      background-color: #0077bc;
      content: '';
    }

    &:hover:after {
      width: 100%;
    }
  }
}

这样做的问题在于，悬停状态下的行宽度没有填满第一行的宽度。

第二种尝试使用display: inline-block，会适应包装器的宽度，而不是像display: inline那样停留在最长的行处。

.wrapper2 {
  width: 260px;

  h2 {
    position: relative;
    display: inline-block;

    background-color: yellow;

    &:after {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 80px;
      height: 3px;

      background-color: #0077bc;
      content: '';
    }

    &:hover:after {
      width: 100%;
    }
  }
}

我想要实现的结果是这样的：

我已经谷歌搜索了相当长的时间，甚至找到了box-decoration-break: clone;，但它并不能帮助我处理伪元素。

有什么想法吗？

- Erik Blomqvist

---

是的...你不能这样做...这不是行框模型的工作方式。 - Paulie_D

为什么不将其包装在带有底部边框的 inline-block div 中呢？ - Karl Adler

Answer 1

这不可能只用CSS来实现，因为它与浏览器呈现CSS的方式相矛盾。我能想到的最接近的解决方案是在wrapper2（inline-block示例）中的文本中添加一个换行符：

This text has too many<br>characters for 1 line

虽然不是理想的解决方案，但更动态的解决方案需要使用JavaScript，例如这里提供的解决方案：Shrink DIV to text that's wrapped to its max-width?

- D-Money

Answer 2

我认为从h2标签中移除display属性将解决该问题，如果我正确理解了你的问题。

    p {
        font-size: 18px;
        font-weight: normal;
        color: #fff;
        margin: 12px 0 0;
        position: relative;
        &:before {
            position: absolute;
            width: 100%;
            height: 2px;
            background: blue;
            content: '';
            display: none;
            bottom: 0;
        }
        &:hover:before {
            display: block;
        }
    }

- Kaleem