css分割线

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

/* 使用伪元素创建分割线 */
.divider::after {
  content: ''; /* 必须设置content属性 */
  display: block; /* 将伪元素设置为块级元素 */
  width: 100%; /* 宽度为100% */
  height: 1px; /* 高度为1px */
  background-color: #000; /* 背景颜色为黑色 */
  margin: 20px 0; /* 设置上下外边距 */
}

解释说明：

1. 使用 border 创建分割线：

   • 通过设置 border: none 来移除默认的边框样式。
   • 使用 height: 1px 来定义分割线的高度。
   • background-color: #000 设置分割线的颜色为黑色。
   • margin: 20px 0 设置分割线的上下外边距，使它与上下内容有一定的间距。

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

   • 通过 ::after 伪元素在元素后插入一个内容为空的块级元素。
   • content: '' 是必须的，因为伪元素需要有内容才能显示。
   • display: block 将伪元素设置为块级元素，以便可以设置宽度和高度。
   • width: 100% 和 height: 1px 分别设置分割线的宽度和高度。
   • background-color: #000 设置分割线的颜色为黑色。
   • margin: 20px 0 设置分割线的上下外边距。