css下划线整个容器

在网页设计和排版中，下划线是一种非常常见的元素。在传统的排版中，我们通常使用下划线来标记标题、重要内容和链接等。而在 CSS 中，我们可以使用下划线来装饰整个容器。

.container {
  border-bottom: 2px solid #000;
} 

如上所示的代码是添加一个下划线的最简单方法，我们只需要给容器添加一个 border-bottom（底部边框）即可。其中，2px 表示下划线的宽度，solid 表示实线样式，#000 则是下划线的颜色。

除了使用底部边框，我们还可以使用伪元素来实现下划线的效果：

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

如上所示的代码中，我们使用了 ::after 伪元素来创建一个虚拟元素，然后给这个虚拟元素添加 border-bottom 属性来实现下划线的效果。其中，content 属性表示要插入的内容，display 属性则设置为 block（块级元素）。由于伪元素会影响其所属元素的尺寸和位置，所以我们使用 display 来设置它的显示类型。

当然，我们还可以继续改进这些方法，比如加入动画、调整下划线的位置等等，只要发挥想象力，我们就能轻松实现各种精彩下划线效果。