如何使用下划线 ::after 放置 h1 标签

在 CSS 中使用下划线 _ 是一种常见的方式，常用于设置样式、命名类等。但是，我们也可以使用 _ 来在元素的 ::after 伪元素中创建下划线。这种方式可以让我们在页面上创建好看的下划线。

在 ::after 中创建下划线

要在 ::after 中创建下划线，我们可以使用以下代码：

h1::after {
  content: "";
  display: block;
  border-bottom: 2px solid #000;
}

上面的代码会在 h1 标签后面创建一个空的 ::after 伪元素，并设置它的 display 为 block，使它独立于 h1 元素。然后，我们使用 border-bottom 属性创建一个下划线。

改变下划线的样式

默认情况下，下划线的样式是实线，颜色为黑色。如果我们想要改变下划线的样式，可以使用 border-bottom-style 和 border-bottom-color 属性：

h1::after {
  content: "";
  display: block;
  border-bottom: 2px dashed #f00;
}

上面的代码会创建一个红色、虚线样式的下划线。

小结

使用下划线 ::after 伪元素来创建下划线是一种简单而有效的方法，可以在页面上创建好看的下划线。我们可以通过设置 border-bottom 属性来改变下划线的样式。