Fancy style for horizontal rules

fancy-hr.css

hr
{
  position: relative;

  height: 1px;
  margin: 2em 0;
  padding: 0;
  clear: both;
 
  text-align: center;

  border: none;
  background: linear-gradient(
  to right,
  rgba(0, 0, 0, 1.0) 45.0%,
  rgba(0, 0, 0, 0.0) 45.1%,
  rgba(0, 0, 0, 0.0) 54.9%,
  rgba(0, 0, 0, 1.0) 55.0%);

  color: rgba(0, 0, 0, 1.0);

}

hr:before
{
  font-size: 1.5em;
  font-family: serif;
  line-height: 2;

  position: absolute;
  display: block;
  overflow: visible;
  
  top: -1em;
  bottom: -1em;
  right: 0;
  left: 0;


  height: 2em;
  width: 100%;

  margin: auto;

  content: '\00a7';
  text-align: center;

  color: inherit;
}