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

在伪元素上添加display: block;即可解决问题。

Answer 2

h3
{
  border-bottom: 3px solid #000;
}
h4{
display : inline-block;
}
h4::after
{
    content: '';
    border-bottom: 8px solid #000;
    width: 52px;
    display: block;
    margin: 0 auto;
}

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

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

Answer 3

这可以做到：

h4 {
  display: inline-block;
}

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

但是您需要将H4用作内联块，否则下划线应位于H4的容器中，而不是文本中间。但是，将H4设为内联块会稍微改变H4的行为。

更新：

如果不仅可以更改CSS，还可以更改HTML，那么这将是更好的解决方案：

h3 > div
{
  border-bottom: 3px solid #000;
  display: inline-block;
}


h4 > div {
  display: inline-block;
}

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

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

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

Answer 4

将伪元素制作成一个块将有助于将其放置在文本下方，并且要获得更多控制，您可以将其定位为相对于将线绕动。

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