如何用css画一条线并在上面显示文字或图像

这就是我想要做的:

和

将文本换行span并使用:伪元素作为行.

将行(:伪元素)放在span使用后面z-index: -1,这样您就可以在文本中移动而不必担心该行.

.featured-images {
  position: relative;
  color: #666666;
  border: 2px solid #333333;
  padding: 0 10px 0 30px;
}
.featured-images span {
  color: #666666;
  background: white;
  padding: 0 10px;
}
.featured-images:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: #666666;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
}

Featured