在线下创建hr径向渐变

Question

答案中有一个很棒的hr梯度（他链接到的jsfiddle显示了一个更新的CSS）- 仅使用CSS创建漂亮的水平线 。 正是我所追求的，但是我希望渐变出现在然后在线条以下而不是在线条上方。

HTML非常简单-

 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> 

我尝试了各种不同的方法，但是无法使其正常工作，而且每当我对其进行更改时，该行本身就会消失。

请有人帮忙...谢谢

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>