CSS 使用选择器 ::after 在文本中添加小边框底部

Question

我需要使用选择器在文本中添加一个小边框底部::after。

<h3>
  Hello, this border is too long
</h3>

<h4>
  Hello, this border should be small
</h4>

该<h3>元素具有正常边框，填充文本的整个空间。但我需要<h4>元素只有一个 10px 长度的边框。

基本上这就是我想要实现的目标：

所以我尝试用 CSS 玩一下，但没有成功：

h3
{
  border-bottom: 3px solid #000;
}

h4::after
{
  content: '';
  border-bottom: 3px solid #000;
  width: 10px;
}

https://jsfiddle.net/qkw37scn/2/

Answer 1

h3
{
  border-bottom: 3px solid #000;
}

h4::after
{
  content: '';
  border-bottom: 3px solid #000;
  width: 10px;
  display: block;
}

在伪元素上添加 adisplay: block;就可以了。