<div class="c">
  <h2>Pseudo-elements on a Horizontal Rule (<code>&lt;hr&gt;</code> element)</h2>

  <hr>

  <p>The content inside the <code>&lt;hr&gt;</code> is two pseudo-elements. You can't put pseudo-elements on replaced elements, but you can put them on some non-replaced void elements.</p>
</div>

<p class="p">Demo by Louis Lazaris. <a href="http://www.sitepoint.com/12-little-known-css-facts-the-sequel" target="_blank">See article</a>.</p>

body {
  font-family: Arial, sans-serif;
  text-align: center;
  padding: 0 20px;
}

.c {
  max-width: 700px;
  margin: auto;
}

hr {
  padding: 5px;
  background: lightpink;
  color: #444;
  display: block;
  overflow: hidden;
  border: solid 1px #444;
}

hr:before {
  content: "♪♪";
}

hr:after {
  content: " This is an <hr> element";
}

.p {
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding-top: 130px;
}