how is this border effect achieved best with CSS?

Question

I saw an amazing border effect on a website, and I'm wondering how the effect is achieved best. It's a seperator between navigation items in a vertical list:

I will choose the best answer based on the cross-browser compatibilty (and as non-hacky as possible).

Answer 1

Here you go

You may have to mess with it depending on what you want to put inside you list! If you want to change the color of the glow, you can just alter the colors in the gradient. This is a nice generator, which you probably already knew about.

HTML:

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS:

ul {
    list-style: none;
    width: 200px;
}
li {
    background: rgb(30,30,30);
    text-align: center;
    height: 40px;
    color: rgb(140,140,140);
    border-bottom: 1px solid black;
}
li:after {
    content: '';
    display: block;
    position: relative;
    top: 41px;
    height: 1px;
    background: #1e1e1e; /* Old browsers */
    background: -moz-linear-gradient(left,  #1e1e1e 0%, #757575 50%, #1e1e1e 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1e1e1e), color-stop(50%,#757575), color-stop(100%,#1e1e1e)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #1e1e1e 0%,#757575 50%,#1e1e1e 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #1e1e1e 0%,#757575 50%,#1e1e1e 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #1e1e1e 0%,#757575 50%,#1e1e1e 100%); /* IE10+ */
    background: linear-gradient(to right,  #1e1e1e 0%,#757575 50%,#1e1e1e 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e1e1e', endColorstr='#1e1e1e',GradientType=1 ); /* IE6-9 */
}