HR TAG STYLING

by davidxmartins

HTML

<h1>
<small>Some text</small>
<hr class="fade2">
SOME TEXT
</h1>

<a href="https://css-tricks.com/examples/hrs/">reference 1</a>
<br>
<a href="https://www.arclab.com/en/kb/htmlcss/how-to-cross-browser-style-hr-horizontal-rule-line-using-css.html">reference 2</a>

CSS

h1 { text-align: center; display: table; margin: 0 auto;}

hr.fade {
    width:50%;
    border: 0;
    height: 3px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    margin: 0 auto;
}

hr.fade2 {
    border: 0;
    height: 1px;
    background: #333;
    background-image: linear-gradient(to right, #ccc, #333, #ccc);
    margin: 0 auto;
}


/* Glyph, by Harry Roberts */

hr.glyph {
    padding: 0;
    border: none;
    border-top: medium double #333;
    color: #333;
    text-align: center;
}


hr.glyph:after {
    content: "§";
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
    background: white;
}

hr.image {height: 24px; background: url('flourish.png') no-repeat 50% 50%; margin: 3em 0; border: 0;}



hr.simple {height:1px; border:none; color:#000; background-color:#000;}