Making a tittle between two lines

Question

This is probably a simple question but:

How can I make a title using any headling tag but I want the title between to lines like this:

HTML :

<h4>Staging Server</h4>

Illustration :

sample

possible duplicate of [Add a line next to a header with CSS](http://stackoverflow.com/questions/20198769/add-a-line-next-to-a-header-with-css) — Denise Skidmore, Jan 06 '15 at 23:10

score 1 · Answer 1 · answered Jan 06 '15 at 23:09

Literally the first result on Google...

body
{
  background-color: black;
  color: white;
}
.subtitle {
  margin: 0 0 2em 0;
}
.fancy {
  line-height: 0.5;
  text-align: center;
}
.fancy span {
  display: inline-block;
  position: relative;  
}
.fancy span:before,
.fancy span:after {
  content: "";
  position: absolute;
  height: 5px;
  border-bottom: 1px solid white;
  border-top: 1px solid white;
  top: 0;
  width: 600px;
}
.fancy span:before {
  right: 100%;
  margin-right: 15px;
}
.fancy span:after {
  left: 100%;
  margin-left: 15px;
}

<p class="subtitle fancy"><span>A fancy subtitle</span></p>

Taken from here.

Weafs.py · Accepted Answer · 2015-01-06T23:21:51.467

You could use :after and :before :pseudo-elements.

h4 span {
  position: relative;
  color: #00C8FF;
  padding: 0 15px;
  margin: 0 80px;
  font-size: 16px;
  font-weight: 100;
}
h4 span:before, h4 span:after {
  content: '';
  position: absolute;
  width: 60%;
  height: 1px;
  transform: translateY(-50%);
  top: 50%;
  background: #6F6F6F;
  left: -60%;
}
h4 span:after {
  left: 100%;
}

<h4><span>Staging Server</span></h4>

score 1 · Answer 3 · answered Jan 06 '15 at 23:15

1

<fieldset style="border:none; border-top: 1px solid #999;">
    <legend style="text-align:center;"> Staging Server </legend>
</fieldset>

http://jsfiddle.net/3qcpjgxw/

answered Jan 06 '15 at 23:15

ceadreak

1,662
2
18
27

Also legend can be completely styled so... simple, elegant +1 plus it's a container for whatever you have coming next – fnostro Jan 06 '15 at 23:25
1

A fieldgroup and legend are not intended to be used as regular content headers, but to identify the controls of a form. You lose the SEO benefit of title tags and, and make the code confusing. Might even confuse screen readers, but I don't know. This is just a misuse of the fieldgroup/legend elements IMO. The OP specifically asked for "using any heading tag" as well. I would not recommend this for a title. – Radley Sustaire Jan 06 '15 at 23:29
yes and no, you typically don't have a heading without follow-up content which in this case is likely stats on the "staging server" which *should* in all likelihood be a series of fields and labels. For myself, working with ASP.NET, there is typically only ever one form. But a whole lot of controls that need to be organized and compartmentalized and, for me, fieldset/legend is a great tool for that. – fnostro Jan 06 '15 at 23:42

score 0 · Answer 4 · answered Jan 06 '15 at 23:19

0

Simple example could be like this:

<hr><h4>Staging Server</h4><hr>

And a little CSS tweak:

hr, h4 {
  display:inline-block;
}

hr {
  width:30%;
}

answered Jan 06 '15 at 23:19

Damjan Pavlica

31,277
10
71
76

Making a tittle between two lines

4 Answers4