使用 CSS 的文本分割效果

CSS 是一种用于描述网页外观的样式表语言，它可以为 HTML 文档添加样式，使得网页更加美观、易读、易用。除了常规的样式规则（如颜色、字体、背景等），CSS 还可以用来实现一些特殊的效果，比如文本分割。

文本分割是一种将文本分割成两个或多个部分并以不同的样式表示的效果。下面将介绍如何使用 CSS 实现这种效果。

实现方式

文本分割的实现方式有多种，下面介绍其中两种常见的方式：使用伪元素（:before 和 :after）和使用背景图。

使用伪元素

使用伪元素是一种实现文本分割效果的常见方式，它可以在文本前面或后面添加一个伪元素，并为伪元素设置不同的样式。

p::before {
  content: " ";
  display: inline-block;
  width: 50%;
  height: 1px;
  background: #000;
  margin-right: 1em;
}

p::after {
  content: " ";
  display: inline-block;
  width: 50%;
  height: 1px;
  background: #000;
  margin-left: 1em;
}

上面的代码使用 ::before 伪元素在文本前添加了一个宽度为 50%、高度为 1px 的水平分割线，并设置了右边距为 1em；使用 ::after 伪元素在文本后添加了一个宽度为 50%、高度为 1px 的水平分割线，并设置了左边距为 1em。

这样，原始的文本就被分割成了两个部分，每个部分之间由一个水平分割线隔开。

使用背景图

使用背景图也是一种实现文本分割效果的常见方式，它可以为文本添加一个背景图，并将背景图分割成两个或多个部分，并将部分之间设置为透明。

p {
  background-image: url('path/to/image.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  padding-left: 1.5em;
  padding-right: 1.5em;
}

p::before {
  content: " ";
  display: inline-block;
  width: 45%;
  height: 1px;
  background: #fff;
  margin-right: 1em;
}

p::after {
  content: " ";
  display: inline-block;
  width: 45%;
  height: 1px;
  background: #fff;
  margin-left: 1em;
}

上面的代码使用了一个背景图作为文本的背景，并为文本前后添加了透明的分割线。注意，这里需要设置背景图的位置为居中，大小为 contain，以保证背景图不失真。同时，为了避免分割线与文本重叠，需要将文本的左右内边距分别设置为 1.5em。

总结

以上就是使用 CSS 实现文本分割效果的常见方式。通过使用伪元素或背景图，可以为网页添加更加丰富的装饰效果。需要注意的是，对于一些老旧的浏览器，不一定支持所有的 CSS 属性和伪元素，因此在使用时需要谨慎。