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

Question

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

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

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

<h3> 元素有一个正常的边框，它填充了整个 space 文本。但我需要 <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

这样做就可以了：

h4 {
  display: inline-block;
}

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

但是你需要H4是inline-block，否则下划线在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 3

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 4

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

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

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

CSS add small border bottom to text using selector ::after

css

pseudo-element