background radial gradient is displaced in Firefox

Question

I have a dropdown menu where I separated the second-level menu items by a "fancy line" ( <hr> tag ). It's working in all browsers except Firefox, in which the separators are displaced outside the dropdown menu.

I've looked for coding errors everywhere but cannot seem to find any.

Can anybody help, please?

My CSS code:

hr.fancy-line {
    border: 0;
    height: 1px;
}

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

hr.fancy-line:after {
    content:'';
    height: 0.5em;
    top: 1px;
    background: initial;    
}

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%);
}   

Answer 1

You missed the position: relative to the parent, because the position: absolute will be attached to the inmediate relative parent (if not, viewport):

https://jsfiddle.net/ks2gtpab/

hr.fancy-line {
    border: 0;
    height: 1px;
    position:relative;
}

The other browsers seems to be wrong in behaviour, even if you think the bug is in firefox, it's because you set top: 1px , and this calculation will be made by the relative parent or viewport if there are not relative parent.