水平线加文字 - CSS

在网页设计中，我们常常需要使用水平线来分隔页面中的不同部分。在许多情况下，我们也需要在水平线上方添加一些文字，以进一步说明页面内容。这篇文章将会介绍如何使用CSS来实现水平线加文字。

使用<hr>标签

在HTML中，我们可以使用<hr>标签来插入水平线。默认情况下，<hr>标签会绘制一条水平线，并自动添加一些样式（如颜色和宽度）。

我们可以在<hr>标签中添加文本内容，这些文本内容将会自动居中位置，并与水平线等宽。例如：

<hr>
<div>分割线上的文本内容</div>
<hr>

这段代码将会在页面中生成两条水平线，分别位于文本内容的上方和下方。

自定义样式

尽管<hr>标签自带一些样式，但我们通常还需要进一步地自定义样式，以使其更符合我们的设计需求。下面是一些常用的样式属性：

• border-color：边框颜色。
• border-width：边框宽度。
• margin：外边距。
• padding：内边距。

例如，下面的CSS代码将会自定义水平线的样式，包括线宽、线颜色、内边距、外边距等：

hr {
  border: none;     /* 移除默认边框 */
  border-top: 1px solid #333;  /* 设置顶部实线边框 */
  margin-top: 20px;  /* 设置顶部外边距 */
  margin-bottom: 20px;  /* 设置底部外边距 */
  padding-top: 5px;  /* 设置顶部内边距 */
  padding-bottom: 5px;  /* 设置底部内边距 */
}

在水平线上方添加文字

我们可以使用CSS中的::before伪元素来在水平线上方添加文本。例如，下面的CSS代码将会在水平线上方添加一个文本标签，并且改变文本的字体大小和颜色：

hr::before {
  content: "这是文本内容";
  display: block;
  font-size: 20px;
  color: #333;
  text-align: center;
  margin-bottom: 10px;
}

其中，content属性用于指定文本内容；display: block用于使伪元素成为一个块级元素；text-align: center用于居中文本；margin-bottom用于设置文本标签的下外边距。

完整代码示例

下面是一段完整的HTML和CSS代码示例，其中展示了如何自定义水平线的样式，并在水平线上方添加文本标签：

<div class="divider">
  <hr>
</div>

<style>
.divider hr {
  border: none;
  border-top: 1px solid #333;
  margin-top: 20px;
  margin-bottom: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.divider hr::before {
  content: "这是文本内容";
  display: block;
  font-size: 20px;
  color: #333;
  text-align: center;
  margin-bottom: 10px;
}
</style>

效果如下所示：

这是文本内容

结论

使用CSS可以轻松实现水平线加文字的效果，增强页面的可读性和美观度。除了上述介绍的方法，我们还可以使用其他的CSS技巧来自定义水平线和文本样式。