불투명도 그라디언트가있는 점선으로 된 밑줄 링크 스타일

Question

100 % 불투명도에서 0 %까지 점선 그라디언트로 내 링크에 밑줄을 긋고 싶습니다. 내가 어떻게 보일지의 화면을했다 :

나는 STH 같은

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

할 것입니다하지만 0 불투명도 및 단일 점 사이의 공간에는 그라데이션이 너무 거기 없다 작은.

이 문제와 관련하여 또 다른 질문이 있습니다. 콘텐츠 ('+') 앞에 다음과 같은 내용이 있는데, 볼 수 있듯이 테두리 아래쪽에 해당 내용이 나오기를 원하지 않습니다.

이것도 가능합니까, 아니면 png 배경을 사용해야합니까?

Jquery도 괜찮습니다.

Answer 1

다음은 간단한 예입니다. 그것이 당신의 필요에 맞는 지 모르십시오.

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/

핸디 크로스 브라우저 그라데이션 생성기 : http://www.colorzilla.com/gradient-editor/

Answer 2

선형 그라데이션 배경이있는 psuedo 요소를 사용하여 테두리 상단에 오버레이 할 수 있습니다.

a { 
    border-bottom: 2px dotted #007acc; 
} 
a:after { 
    content: ''; 
    display: block; 
    position: absolute; 
    width: 100%; 
    height: 2px; 
    top: 100%; 
    background: linear-gradient(left, rgba(22, 23, 25, 1) 0%, rgba(22, 23, 25, 0) 100%); 
} 

배경색은 동일해야하지만 작업을 수행해야합니다. 지원하려는 브라우저에 따라 업체 프리픽스와 올바른 색상 코드가 필요합니다.