导航栏下带有::after的实线

是一种常见的网页设计技巧，用于在导航栏下方添加一条水平实线，以增强导航栏的视觉效果和分隔内容区域。

这种实线通常通过CSS伪元素::after来实现，它是CSS中的一种伪类选择器，用于在选中元素的内容后面插入生成的内容。通过设置::after的样式属性，可以实现在导航栏下方添加一条实线。

具体实现方法如下：

首先，为导航栏的父元素（通常是一个容器元素，如<div>或<nav>）设置相对定位（position: relative;），这是为了让伪元素::after相对于该容器定位。
然后，使用伪元素::after为导航栏的父元素添加一个子元素，通过设置content属性为空字符串（content: "";）来生成该伪元素。
接下来，设置伪元素::after的样式属性，包括宽度（width）、高度（height）、背景颜色（background-color）、定位（position）、左偏移量（left）、底部偏移量（bottom）等，以及其他样式属性，如边框（border）、圆角（border-radius）等，来定义实线的样式。

以下是一个示例代码：

.nav-container {
  position: relative;
}

.nav-container::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #000;
}

这样，就可以在导航栏下方添加一条宽度为100%、高度为1px的黑色实线。

应用场景：