css 分割线

/* 使用 border 创建分割线 */
hr {
  border: none; /* 移除默认样式 */
  height: 1px; /* 设置高度 */
  background-color: #ccc; /* 设置颜色 */
  margin: 20px 0; /* 设置上下外边距 */
}

/* 使用伪元素创建分割线 */
.divider::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background-color: #ccc;
  margin: 20px 0;
}

解释说明：

1. 使用 border 创建分割线：

   • hr 标签是 HTML 中专门用于创建水平分割线的标签。
   • border: none; 移除了默认的样式，以便我们自定义分割线的外观。
   • height: 1px; 和 background-color: #ccc; 分别设置了分割线的高度和颜色。
   • margin: 20px 0; 在分割线上下添加了间距。

2. 使用伪元素创建分割线：

   • .divider::after 是通过 CSS 伪元素 ::after 来创建一个块级元素作为分割线。
   • content: ''; 是必须的，因为伪元素需要内容才能显示。
   • width: 100%; 确保分割线占据整个容器的宽度。
   • height: 1px; 和 background-color: #ccc; 同样设置了分割线的高度和颜色。
   • margin: 20px 0; 在分割线上下添加了间距。