Horizontale Linie, aber mit dem Schatten unten

Question

Ich möchte eine horizontale Linie ähnlich der auf this post gefunden und als Lösung markiert, aber nur mit dem Schatten auf der Unterseite erscheinen. Der nächste, den ich bekommen kann, ist, den Schatten in der Mitte der Linie zu bekommen, sowohl nach oben als auch nach unten.

Answer 1

Gefällt mir?

.fancy-line { 
 
    border: 0; 
 
    height: 1px; 
 
    position: relative; 
 
    margin: 0.5em 0; 
 
} 
 
.fancy-line:before { 
 
    top: -0.5em; 
 
    height: 1em; 
 
} 
 
.fancy-line:after { 
 
    height: 0.5em; 
 
    top: calc(-0.5em + 1px);  /* adjusted this */ 
 
} 
 

 
.fancy-line:before, .fancy-line:after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 100%; 
 
} 
 

 
.fancy-line, .fancy-line:before { 
 
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 75%); 
 
} 
 

 
body, .fancy-line:after { 
 
    background: #f4f4f4; 
 
}

-Some Text- 
 
<div class="fancy-line"></div>

Der ursprüngliche Code erzeugt einen radialen Verlauf und bedeckt die untere Hälfte davon mit einem Block die gleichen wie der Hintergrund gefärbt. Die Anpassung an Ihre Anforderungen ist nur eine Frage des Verschiebens des Abdeckteils von unten nach oben.

Beachten Sie auch: hr Elemente müssen selbstschließend sein. Dies schließt die Verwendung von :before und :after aus, da selbstschließende Elemente keine Kinder haben können. In der referenzierten Antwort verwendeten sie keine bestimmte Funktion von hr, also habe ich sie hier in eine div umgewandelt.

Answer 2

einen Blick auf diese: http://jsfiddle.net/9rovqvoj/1/

Es ist im Grunde das gleiche, aber eine Maske vor Pseudo-Element hinzugefügt wird: vor statt: nach und z-Index hinzugefügt.

hr.fancy-line:after { 
    top: -0.5em; 
    height: 1em; 
} 

hr.fancy-line:before { 
    content: ''; 
    height: 0.5em; 
    top: -0.5em; 
    z-index: 999; 
}