Ligne horizontale mais avec l'ombre en bas

Question

Je veux créer une ligne horizontale similaire à celle trouvée sur this post et marquée comme la solution mais seulement avec l'ombre apparaissant en bas. Le plus proche que je peux obtenir est d'obtenir l'ombre affichée au milieu de la ligne, à la fois vers le haut et vers le bas.

Answer 1

Comme ça?

.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>

Le code original génère un gradient radial et couvre la moitié inférieure de celui-ci avec un bloc de couleur identique à l'arrière-plan. Ajuster à vos besoins est juste une question de déplacer la pièce de couverture de bas en haut.

De plus, notez: hr les éléments doivent être à fermeture automatique. Ceci interdit l'utilisation de :before et :after étant donné que les éléments à fermeture automatique ne peuvent pas avoir d'enfants. Dans la réponse référencée, ils n'utilisaient aucune fonctionnalité particulière de hr, donc je l'ai converti en div ici.

Answer 2

Jetez un oeil à ceci: http://jsfiddle.net/9rovqvoj/1/

Il est fondamentalement la même, mais l'ajout d'un masque avant élément pseudo: avant au lieu de: après et a ajouté un z-index à elle.

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

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