用CSS巧妙勾勒文字两侧的横线

用横线来强调文字或作为分隔线是网页设计中常见的一种技巧。通常，横线可以通过在HTML代码中添加<hr>标签来实现。但是，有时候我们可能需要在文字的两侧添加横线，这种情况下，使用<hr>标签就无法实现了。

使用CSS巧妙勾勒文字两侧的横线，实现方法多种多样，各有千秋。

1. 使用边框

使用边框是最简单的一种方法。只需要在文字的父元素上添加边框即可。

.text {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}

这种方法的优点是实现简单，缺点是横线的位置固定，不能根据文字的长度自动调整。

2. 使用伪元素

使用伪元素也是一种常见的方法。伪元素可以让我们在元素内部添加额外的内容，而不会影响元素本身的结构。

.text {
  position: relative;
}

.text::before,
.text::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 50%;
  height: 1px;
  background-color: #000;
}

.text::before {
  left: 0;
}

.text::after {
  right: 0;
}

这种方法的优点是横线的位置可以根据文字的长度自动调整，缺点是实现相对复杂，需要更多的CSS代码。

3. 使用定位

使用定位也是一种常用的方法。我们可以将文字元素设置为绝对定位，然后在文字的左右两侧添加两个绝对定位的元素，作为横线。

.text {
  position: relative;
}

.text-line {
  position: absolute;
  top: 50%;
  height: 1px;
  background-color: #000;
}

.text-line-left {
  left: 0;
  width: 50%;
}

.text-line-right {
  right: 0;
  width: 50%;
}

这种方法的优点是实现简单，缺点是横线的位置固定，不能根据文字的长度自动调整。

4. 使用浮动

使用浮动也是一种常用的方法。我们可以将文字元素设置为浮动，然后在文字的左右两侧添加两个浮动的元素，作为横线。

.text {
  float: left;
}

.text-line {
  float: left;
  height: 1px;
  background-color: #000;
}

.text-line-left {
  width: 50%;
}

.text-line-right {
  width: 50%;
}

这种方法的优点是实现简单，缺点是横线的位置固定，不能根据文字的长度自动调整。

5. 使用背景图

使用背景图也是一种常见的方法。我们可以将一个透明的背景图作为横线，然后将背景图应用到文字的父元素上。

.text {
  background-image: url(line.png);
  background-position: center center;
  background-repeat: no-repeat;
}

这种方法的优点是实现简单，缺点是背景图必须是透明的，否则会影响文字的显示。

以上五种方法都可以用来实现文字两侧的横线。具体使用哪种方法，取决于具体的设计需求。