html - 如何移动边框底部，使其开始超过文本？

Question

我知道我可以通过填充或行高上下移动我的边框底部，但我如何左右移动它以便边框的开头在文本开始之后开始，例如

文本文本

      ______________

谢谢

当前代码:

div {
  border-bottom: 1px solid white;
}

h1 {
  padding-right: 1em;
}

这会向右扩展边框的长度，但不会改变它的起点，所以看起来像

文本文本

___________________

Answer 1

如果您使用 :after 伪类，那么您可以在标题后添加一个 DOM 元素，该元素可以按您希望的方式绝对定位。

h1 {
  display: inline-block;
  padding-right: 1em;
  position: relative;
}

h1:after {
  content: '';
  position: absolute;
  left: 20px;
  right: 20px;
  border-bottom: 1px solid #ccc;
  display: block;
}

<h1>TEXTTEXTEXT</h1>