如何使用CSS在中间制作带有单词的水平线？

有时候，在网页设计中需要使用水平线将页面中的不同部分分开。如果这条水平线能够带有一个单词，那么就更好了，可以增强页面的可读性和美感。那么，我们该如何使用CSS在中间制作带有单词的水平线呢？

首先，我们需要创建一个带有单词的HTML元素。可以使用<span>或者其他适当的标签来实现，例如：

<div class="horizontal-line">
  <span class="line-text">中间的单词</span>
</div>

接下来，我们需要使用CSS来给这个元素添加水平线的样式。具体步骤如下：

1. 给包含单词的元素设置display: flex;，这样我们就能够使用flexbox来实现水平线的布局。

2. 给元素添加一个border-bottom，同时设置它的颜色和宽度。

3. 给单词元素添加一个背景色和padding，以使其与水平线对齐。

4. 最后，我们还可以添加其他样式，例如字体大小、颜色等等，以使整个元素看起来更加美观。

下面是一个完整的CSS代码示例：

.horizontal-line {
  display: flex;
  align-items: center;
  margin: 20px 0;
}

.horizontal-line::before, .horizontal-line::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background-color: #ddd;
}

.line-text {
  background-color: #f1f1f1;
  padding: 0 10px;
  font-size: 16px;
  color: #666;
}

这段代码使用了伪元素来创建了两个span元素，它们将会成为水平线的两端。其中，flex-grow属性将会使这两个元素填充水平线之间的空隙。

最终的效果如下所示：

中间的单词

代码片段：

<div class="horizontal-line">
  <span></span>
  <span class="line-text">中间的单词</span>
  <span></span>
</div>

.horizontal-line {
  display: flex;
  align-items: center;
  margin: 20px 0;
}

.horizontal-line span {
  content: "";
  flex-grow: 1;
  height: 1px;
  background-color: #ddd;
}

.line-text {
  background-color: #f1f1f1;
  padding: 0 10px;
  font-size: 16px;
  color: #666;
}