如何用css在标题的两边放置实线？

Question

  

可能重复：
  How can I make a fieldset legend-style “background line” on heading text?

在某个页面上，我的客户希望我制作一个小部件，其中包含从标题两侧出来的行。有没有一种简单的方法可以用css制作这些红色标题？

Answer 1

离开我的头顶并且未经测试...你可以在标题上放置一个边框底部，然后在标题中包含文本的<span>，在标尺上放置一个白色的背景颜色将其向下移动几个像素以覆盖部分边框

position: relative;
bottom: -10px;

修改：您需要在标题上设置text-align: center;，并确保其上没有overflow: hidden;！

Answer 2

您可以创建一个像素宽的图像，其高度应该是标题，然后将图像中的所有像素都设置为白色，中间除了一个红色。然后，您可以使用CSS将其设置为在x轴上重复的封闭元素的背景图像。这似乎是屏幕上的红线。您可以将文本括在div中，并将该背景颜色设置为白色，这样该行就不会出现在文本后面。