在线下创建hr径向渐变

Question

There is a wonderful hr gradient here in the answer (the jsfiddle he links to shows an updated css) - Create a beautiful horizontal line with CSS only . It is exactly what I am after but I would like the gradient to appear below then line instead of above it.

The html is very simple -

 hr.fancy-line { border: 0; height: 1px; position: relative; margin: 0.5em 0; /* Keep other elements away from pseudo elements*/ } hr.fancy-line:before { top: -0.5em; height: 1em; } hr.fancy-line:after { content: ''; height: 0.5em; /* half the height of :before */ top: 1px; /* height of hr*/ } hr.fancy-line:before, hr.fancy-line:after { content: ''; position: absolute; width: 100%; } hr.fancy-line, hr.fancy-line:before { background: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%); background: -webkit-gradient(radial, center center, 0px, center center, 75%, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(75%, rgba(0, 0, 0, 0))); background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%); background: -o-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%); background: -ms-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%); background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%); } body, hr.fancy-line:after { background: #f4f4f4; } 

 <hr class="fancy-line"></hr> 

I have tried various different things but cannot get it to work, plus whenever I change it, the line itself disappears.

Please can someone help... thank you

Answer 1

hr.fancy-line:after {
    content:'';
    height: 0.5em;   
    top: -8px;  /*change or bottom:0; */
}

 hr.fancy-line { border: 0; height: 1px; position: relative; margin: 0.5em 0; } hr.fancy-line:before { top: -0.5em; height: 1em; } hr.fancy-line:after { content: ''; height: 0.5em; top: -8px; /*or bottom:0; */ } hr.fancy-line:before, hr.fancy-line:after { content: ''; position: absolute; width: 100%; } hr.fancy-line, hr.fancy-line:before { background: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%); background: -webkit-gradient(radial, center center, 0px, center center, 75%, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(75%, rgba(0, 0, 0, 0))); background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%); background: -o-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%); background: -ms-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%); background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%); } body, hr.fancy-line:after { background: #f4f4f4; } 

 <hr class="fancy-line"></hr>