CSS：多行

Question

我有一个包含伪元素的文本元素来控制下划线。我想要实现的是当元素达到两行（或更多）时，我希望下划线是元素的100％宽度，但现在它只是最后一行的100％（见截图）。

我已经竖起小提示向你展示我的意思：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;，但它对我的伪元素没有帮助。

有什么想法吗？

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?

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