html - 使用 CSS 或 HTML 创建带有线条的标题或标题

Question

我在很多网站上都看到过这个东西，但我不知道它是如何完成的。我如何创建这样的东西：

Answer 1

这个问题我已经回答过了。如何用侧面的线条简化此标题，使其不需要 css3 背景属性？

jsFiddle：http: //jsfiddle.net/dASCv/10/

HTML

<div>
    <h2>Title</h2>
</div>

CSS

div {
    text-align: center;
}

h2:before,
h2:after {
    border-top: 1px solid black;
    display: block;
    height: 1px;
    content: " ";
    width: 40%;
    position: absolute;
    left: 0;
    top: 1.4em;
}
h2:after {
   right: 0;  
   left: auto; 
}

Answer 2

使用 CSS 伪类:before& :after，因此您可以在文本之前和之后添加文本、图形或任何内容。

Answer 3

通过使用legend，您可以根据随附的屏幕截图实现您想要的效果。

这是相同的工作演示。

的HTML：

<form>
 <fieldset>
  <legend>Title</legend>
 </fieldset>
</form>

CSS：

legend {
    margin: 0 50%;
    text-align: center;
}

fieldset {
    border:5px solid black;
    border-bottom: medium none;
    border-left: medium none;
    border-right: medium none;
}

我希望这是你想要的。