[分享]css分割线添加文字

CSS分割线是网页设计中常用的一个元素，可以帮助页面的排版更加美观和优雅。除了传统的线性分割线之外，我们还可以通过CSS来添加文字效果，使得分割线不再是简单的线条，而成为视觉上的重要元素。要实现这样的...

CSS分割线是网页设计中常用的一个元素，可以帮助页面的排版更加美观和优雅。除了传统的线性分割线之外，我们还可以通过CSS来添加文字效果，使得分割线不再是简单的线条，而成为视觉上的重要元素。

要实现这样的效果，我们需要使用伪元素:before或:after来创建一个空白的元素，然后通过CSS定义其样式。下面是一段示例代码：

.separator {
  position: relative;
  text-align: center;
  margin: 20px 0;
}
.separator:before, .separator:after {
  content: "";
  display: inline-block;
  width: 50%;
  height: 1px;
  vertical-align: middle;
  background-color: #ccc;
}
.separator:before {
  margin-right: 0.5em;
}
.separator:after {
  margin-left: 0.5em;
} 

首先，我们定义了一个.separator类来表示需要添加效果的分割线，并设置其position属性为relative以便在其内部创建伪元素。接着，我们通过:before和:after分别创建左右两个空白元素，并设置其display属性为inline-block使其显示在一行，宽度为50%，高度为1px，垂直方向居中，背景色为#ccc的灰色。

为了使分割线的左右两侧有一定的间隔，我们在:before的margin-right和:after的margin-left中设置0.5em的间距。此外，为了使效果更加美观，我们还将separator类的text-align属性设置为center，以便对齐伪元素与其内部的文本。

如果想要在分割线的中间添加文字效果，我们只需要在:before和:after中的content属性中添加文字即可，例如：

.separator:before {
  margin-right: 0.5em;
  content: "Hello";
}
.separator:after {
  margin-left: 0.5em;
  content: "World";
} 

这样就可以在分割线的中间分别添加上“Hello”和“World”的文字效果了。