dotted underline link style with opacity gradient

Question

I would like to underline my links with some kind of dotted gradient from 100% opacity to 0%. I made a screen of what I should look like:

I would do sth like

a {
  border-bottom: 2px dotted #007acc;
} 

but there is no gradient to 0 opacity and the space between the single dots is way too small.

Another question regarding this problem: I have some :before content (the '+') and I don't want the border-bottom to hit that content, as you can see.

Is this even possible or do I have to use a png background?

Jquery would be ok too.

Answer 1

Here's a quick example. Don't know if it fits your needs.

body{
    background:#111;
}
ul{
    padding:0;
    margin:0;
}
li{
    margin-left:20px;
    width:200px;
    list-style:none;
    border-bottom:dotted 2px #99f;
    color:#99f;
    position:relative;
}
li:before{
    content:'+';
    position:absolute;
    left:-15px;
}
li:after{
    content:'';
    position:absolute;
    height:2px;
    width:100%;
    top:100%;
    background:red;
    left:0;

background: -moz-linear-gradient(left, rgba(17,17,17,0) 0%, rgba(17,17,17,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(17,17,17,0)), color-stop(100%,rgba(17,17,17,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(17,17,17,0) 0%,rgba(17,17,17,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(17,17,17,0) 0%,rgba(17,17,17,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(17,17,17,0) 0%,rgba(17,17,17,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(17,17,17,0) 0%,rgba(17,17,17,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00111111', endColorstr='#111111',GradientType=1 ); /* IE6-9 */
}

http://jsfiddle.net/KZPbf/

Handy cross browser gradient generator: http://www.colorzilla.com/gradient-editor/