css - 水平线，但阴影在底部

我想创建一条与this post上找到的水平线相似的水平线，并将其标记为解决方案，但阴影仅出现在底部。
我能得到的最接近的是使该行中间和上下显示的阴影。

最佳答案

像这样？

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

原始代码生成一个径向渐变，并用与背景相同的颜色覆盖其下半部分。根据您的要求进行调整只是将覆盖物从底部移动到顶部的问题。

另外，请注意：hr元素必须是自动关闭的。由于自闭合元素不能有子元素，因此这排除了:before和:after的使用。在引用的答案中，他们没有使用hr的任何特定功能，因此我在这里将其转换为div。