Fancy Lines and Horizontal Rule Examples

gistfile1.txt

//  First one  . . . sooo fancy:

hr  {
  border: 0;
  height: 1px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
  background-color: #7DD181;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

//  This is a line that goes next to a short headline:
//  //  Useage:
<h2 class="lines">Text</h2>
//  //  CSS:
.liner {
  display: flex;
  align-items: flex-start;
  text-align: left;
}
.liner:after {
  content: '';
  flex-grow: 1;
  height: 1px;
  background: #D66853;
  min-width: 20px;
  margin: auto;
}
.liner:after {
  margin-left: 20px;
}

//  HR with Symbol in the middle:

hr.style-eight {
    overflow: visible; /* For IE */
    padding: 0;
    border: none;
    border-top: medium double #333;
    color: #333;
    text-align: center;
}
hr.style-eight:after {
    content: "§";
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
    background: white;
}




//  This HR, pretty plain:

hr  {
  width:88%;
  height:2px;
  box-shadow: 2px 2px 2px;
}