Words at the Center of a Horizontal Line

Neat CSS trick I hammered out today when I needed to create an “Or” between two sections of a web page:

Bla bla bla

Or

bleh bleh bleh

Minimal markup, works in IE8 (ugh, work), Chrome & Firefox.

Code…

<p class="hrtext">Or</p>

<style>
.hrtext {
  display: block;
  overflow: hidden;
  text-align: center;
}
.hrtext:before,
.hrtext:after {
  background-color: #ccc;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 20%;
}
.hrtext:before {
  right: 0.5em;
  margin-left: -50%;
}
.hrtext:after {
  left: 0.5em;
  margin-right: -50%;
}
</style>


Inspired by (er, largely copied from) http://stackoverflow.com/questions/5214127/css-technique-for-a-horizontal-line-with-words-in-the-middle