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/

原文由 Linesofcode 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

原文由 Weisen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

将伪元素设置为块将有助于将其放置在文本下方，并且为了获得更多控制，您可以将其定位为相对于移动线条。

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

原文由 Garrett Bear 发布，翻译遵循 CC BY-SA 4.0 许可协议