Creating a headline or title with lines beside it using CSS or HTML

Question

I've seen this thing in many websites, but I couldn't figure out how it is done. How do I create something like this:

enter image description here

there is hr tag in html http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_hr_test — mahesh, Oct 15 '13 at 08:06
Different pages do it in different ways. Look at their HTML and CSS (and maybe even JavaScript) code to see how they do it. — Jukka K. Korpela, Oct 15 '13 at 08:08

score 3 · Answer 1 · edited May 23 '17 at 12:01

3

I have already answered on this question. How do I simplify this header with lines on the side, so that it doesn't need css3 background properties?

The 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; 
}

edited May 23 '17 at 12:01

Community

1
1

answered Oct 15 '13 at 08:00

Donovan Charpin

3,567
22
30

Just for my curiosity, when you strech the window, the border collapses to merge itself into the text characters, any solutions?? – Nitesh Oct 15 '13 at 08:14
But the stetchablity is still an issue in your solution, so my curiosity is that whether you can resolve it, as it might be an orgainic solution without using fieldset, etc. – Nitesh Oct 15 '13 at 08:25
It's already a complicated solution. So it's more complicated to arrange a little problem. You can play with the h2:before, h2:after width to have better results, all depend of the context on your website. – Donovan Charpin Oct 15 '13 at 08:33

score 1 · Answer 2 · answered Oct 15 '13 at 08:01

1

Use the CSS pseudo-classes :before & :after, so you can add text, graphics or what ever you before and after the text.

answered Oct 15 '13 at 08:01

Michael Schmidt

9,090
13
56
80

score 0 · Answer 3 · answered Oct 15 '13 at 08:13

By using a legend, you can achieve what you want as per your attached screenshot.

Here is the WORKING DEMO for the same.

The HTML:

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

The 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;
}

I hope this is what you want.

Creating a headline or title with lines beside it using CSS or HTML

3 Answers3