css实现中间文字两边横线效果

要实现中间文字两边横线的效果，可以使用CSS中的伪元素 ::before 和 ::after，以及border-bottom实现。具体的实现方式如下：

首先需要在HTML中添加需要添加效果的元素，例如下面的代码，我们在h1标签中添加示例文本：

<h1>This is an example text</h1>

然后，在CSS中为该元素添加样式。首先需要将h1元素的position属性设置为relative，这样后面要添加的伪元素才可以对其进行定位。同时，还需要将h1元素的字体和text-align属性设置为合适的值，以适应你的设计需求。例如，以下代码将字体设置为30像素大小，文本居中对齐：

h1 {
  position: relative;
  font-size: 30px;
  text-align: center;
}

接着，我们使用伪元素 ::before 和 ::after 来生成横线。其中， ::before 用于生成左侧的横线， ::after 用于生成右侧的横线。需要为伪元素添加content属性，否则它们将不会出现在页面上。同时，还需设置它们的display属性为 block，并对它们进行定位：

h1::before,
h1::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  width: 50%;
  height: 1px;
  background-color: #000;
}

以上代码将横线定位到h1元素的底部，使其与文本之间保持一点距离。width属性设置为50%，目的是将横线的长度限制在标题宽度的一半，以保证两根横线之间平分h1元素。

最后，我们将 ::before 和 ::after 中的一个横线从左侧开始，另一个从右侧开始，形成中间文字两侧横线的效果。可以使用left和right属性来调整伪元素的位置，如下所示：

h1::before {
  left: 0;
}
h1::after {
  right: 0;
}

这样，就完成了中间文字两侧横线的效果。以下是完整的CSS代码：

h1 {
  position: relative;
  font-size: 30px;
  text-align: center;
}

h1::before,
h1::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  width: 50%;
  height: 1px;
  background-color: #000;
}
h1::before {
  left: 0;
}
h1::after {
  right: 0;
}

另外，以下是另一个示例，我们可以为横线添加 margin 和 padding 属性，以达到更好的效果。

h2 {
  position: relative;
  font-size: 24px;
  text-align: center;
  margin-bottom: 30px;
}

h2::before,
h2::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -5px;
  width: 50%;
  height: 1px;
  background-color: #000;
  margin: 0 8px;
  padding: 0 10px;
}

h2::before {
  left: 0;
}

h2::after {
  right: 0;
}

以上是完整的实现中间文字两侧横线的教程，希望对您有帮助。