Horizontal line but with the shadow at the bottom

Question

I want to create a horizontal line similar to the one found on this post and marked as the solution but only with the shadow appearing at the bottom. The closest I can get is getting the shadow shown in the middle of the line, both up and down.

Answer 1

Like this?

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

The original code generates a radial gradient and covers the bottom half of it with a block colored the same as the background. Adjusting it to your requirements is just a matter of moving the covering piece from the bottom to the top.

Also, note: hr elements are required to be self closing. This precludes the use of :before and :after since self-closing elements can't have children. In the referenced answer, they weren't using any particular feature of hr, so I've converted it to a div here.