边框底部的特殊宽度

Question

我在这里遇到了一个我正在努力解决的问题，您可以在我上传的截图中看到更多内容。

我正在尝试为一个或一个文本设置一个特殊的边框底部，但边框应该有一个特殊的宽度，而不是覆盖单词的所有宽度。

文本在页面中居中，因此它更复杂，因为页面中会有更多这样的文本，每个文本都有不同的宽度。

我想到了三个解决方案：

1）使用边框底部，但如果每个文本总是不同，我如何设置宽度？

2）使用一个hr元素，但它不会完全出现在单词之下或单词的开头，如果我居中它会在页面中间只是偶然

3）使用：after属性，但我认为在这种情况下，该行会在页面中间的某个地方进行，而不是在单词的开头。

有关如何在屏幕截图中制作内容的任何建议吗？

感谢您的每一个建议，并花时间回答！ 弗朗西斯

Answer 1

尝试这样的事情：

＆＃13;

＆＃13;

h1{
  position: relative;
}

h1::before{
  content: "";
  background: red;
  width: 30px;
  height: 2px;
  position: absolute;
  bottom: -5px;
}

＆＃13;

<h1>This is the tittle</h1>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用此

的:after伪元素

h1::after{
  content: "";
  background: red;
  width: 40px;
  height: 5px;
  display: block;
}

<h1>This is the tittle</h1>

Answer 3

如果您知道要加下划线的字母，则应将它们包裹在此范围内的边框下方