中间有图标的水平线的 CSS 技术 - CSS

在网页设计中，我们经常会用到水平线来分隔内容区域，但简单的水平线可能显得过于平淡无奇。为了让水平线更加有趣，我们可以在其中加上一个图标，这样可以起到美化网页的作用。下面是如何使用CSS技术实现。

方法一：使用 ::before 伪元素

使用 ::before 伪元素可以在水平线的前面插入图标。以下是实现的详细步骤：

1. 创建一个容器元素，用作水平线（例如，可以使用 <div> 元素）。
2. 给容器元素设置 position: relative;。
3. 使用 ::before 伪元素来插入图标，如下所示：

.icon-line::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: url("icon.png") no-repeat center;
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
}

在上面的代码中，我们首先使用 content: ""; 来清空 ::before 伪元素的内容。然后，使用 display: block; 将其转换为块级元素。接下来，我们设置了图标的宽度和高度，再通过 background 属性来指定图标的路径和位置。同时，为了将图标垂直居中，还需要设置 top: -10px;。最后，为了让图标水平居中，使用 left: 50%; 和 transform: translateX(-50%); 来实现。

完整的代码如下所示：

<div class="icon-line"></div>

<style>
.icon-line {
  height: 1px;
  background-color: #ccc;
  position: relative;
}

.icon-line::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: url("icon.png") no-repeat center;
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
}
</style>

方法二：使用 flexbox 布局

另一种方法是使用 flexbox 布局来实现。以下是实现的步骤：

1. 创建一个容器元素，用作水平线（例如，可以使用 <div> 元素）。
2. 设置容器元素的 display 属性为 flex。
3. 在容器元素中插入两个子元素。第一个子元素用于显示水平线，第二个子元素用于显示图标。
4. 将第一个子元素的 flex-grow 属性设置为 1，使其占据所有剩余的空间。
5. 针对第二个子元素，使用 margin 属性来水平居中。

以下是示例代码：

<div class="icon-line-flex">
  <div class="line"></div>
  <div class="icon"></div>
</div>

<style>
.icon-line-flex {
  display: flex;
  align-items: center;
}

.line {
  flex-grow: 1;
  height: 1px;
  background-color: #ccc;
}

.icon {
  width: 20px;
  height: 20px;
  background: url("icon.png") no-repeat center;
  margin: 0 10px;
}
</style>

通过以上两种方法，您可以在水平线中间插入一个图标，使页面更加美观和有趣。