Skip to content

Instantly share code, notes, and snippets.

@midu
Forked from kizu/dabblet.css
Created January 4, 2012 16:40
Show Gist options
  • Save midu/1560860 to your computer and use it in GitHub Desktop.
Save midu/1560860 to your computer and use it in GitHub Desktop.
Centered heading with rules
/* Centered heading with rules */
h1 {
position: relative;
overflow: hidden;
white-space: nowrap;
text-align: center;
text-overflow: ellipsis;
color: #f2c63f;
font: 1.6em/1.1 Georgia;
padding: .2em 0;
}
h1:before,
h1:after {
content: "";
position: relative;
display: inline-block;
width: 50%;
height: 2px;
vertical-align: middle;
background: #000;
}
h1:before {
left: -.5em;
margin: 0 0 0 -50%;
}
h1:after {
left: .5em;
margin: 0 -50% 0 0;
}
h1>span {
display: inline-block;
vertical-align: middle;
white-space: normal;
}
/* Works on any background */
html {
background: url(http://kevinbongart.net/images/background.jpg);
min-height:100%;
font: 1.3em/1.5 Georgia;
color: #d1d1d1;
}
<h1>Hello!</h1>
<p>Here are the centered headings with horizontal lines.</p>
<p>They are one-lined by default, but if it needs to be multiline, then you can add an extra span.</p>
<h1><span>Multiline heading<br/>with an extra wrapping span</span></h1>
<h1>Some long, long heading without a wrapping span, so it would be overflown. Some long, long heading without a wrapping span, so it would be overflown. Some long, long heading without a wrapping span, so it would be overflown.</h1>
<p>↑ Here you can see one-lined heading, with text-overflow: ellipsis. Since it's too long, the horizontal lines cannot be seen.</p>
<footer><a href="http://dabblet.com/gist/1560674">Edit this dabblet</a></footer>
{"view":"split-vertical","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment