css上下文字中间斜线

CSS上下文字中间斜线是一种很常见的排版方式，它可以让文本内容更加美观、清晰，同时也增加了一些视觉效果。下面我们来讲解实现的方法。

.separator {
  position: relative;
  margin: 1em 0;
  text-align: center;
}
 
.separator span {
  background-color: #fff;
  padding: 0 .5em;
  position: relative;
  z-index: 1;
}
 
.separator:before,
.separator:after {
  content: ';
  background-color: #000;
  height: 1px;
  position: absolute;
  top: 50%;
  z-index: 0;
}
 
.separator:before {
  left: 0;
  right: 50%;
}
 
.separator:after {
  left: 50%;
  right: 0;
} 

上述代码中，我们首先定义了一个class名为separator的元素，该元素的位置为相对定位，同时添加了1em的垂直外边距和文本居中对齐样式。接下来，我们在separator元素中插入一个span元素作为文字的容器，然后设置了背景色和内边距，同时还定义了z-index为1。

接着，我们使用:before和:after伪元素来实现斜线效果的绘制。它们的content属性设置为空字符串，然后分别使用background-color、height、position和top样式来设置斜线的样式和位置。同时，我们还通过z-index属性来控制这两个伪元素的显示层级，使其在span元素之下。

最后，我们分别给:before和:after伪元素设置left和right样式，来分别控制它们在separator的左侧和右侧的偏移位置，从而实现斜线的交叉效果。