Zmiana koloru podkreślenia

Question

Zastanawiam się, czy istnieje jakaś sztuczka, aby rozwiązać ten problem.

Mam poniższy link i chcę zmienić kolor podkreślenia.

Ten link zawiera wiele wierszy, które trzeba zmienić kolor podkreślenia być lżejszy niż istniejący jeden

Korzystanie dolnej granicy nie jest sposobem na rozwiązanie tego powodu wielu linii.

Czy istnieje jakaś sztuczka, aby rozwiązać ten problem?

EDIT

@Paolo Bergantino: Współpracuje z IE8, jest to możliwe, aby włamać się IE6,7?

Answer 1

Jeśli to, co masz na myśli ma inny kolor podkreślenia niż to, co tekst jest jedyną rzeczą, którą mogę myśleć jest dodanie rozpiętość wokół linkiem:

<span class='underline'> 
    <a href="#">this just<br>a test<br>of underline color</a> 
</span> 

a następnie CSS:

span.underline { 
    color: red; 
    text-decoration: underline; 
} 
span.underline a { 
    color: blue; 
    text-decoration: none; 
} 

I you get what you want.

EDIT:

Testowanie to trochę dalej, to nie działa dla mnie na IE. Jeśli jednak dodasz margines graniczny, zadziwiająco działa we wszystkich przeglądarkach, z tym wyjątkiem, że IE nie umieszcza granicy pod ostatnią. Spróbuję trochę głębiej wniknąć, aby zobaczyć, czy jest na to przeglądarka w różnych przeglądarkach ...

Answer 2

Podkreślenie linków odbywa się za pomocą stylu CSS do dekoracji tekstu, myślę, że jest w tym samym kolorze co tekst.

jeśli ustawisz dekorację tekstu na brak, a następnie dodasz krawędź - możesz zmienić kolor za pomocą stylu obramowania.

Answer 3

Podkreślone, będąc atrybutem tekstowym, dziedziczy kolor tekstu. Wątpię więc, by można było wyraźnie zmienić kolor podkreślenia bez zmiany koloru tekstu.

Answer 4

Podkreślenie łączy zawsze będzie miało ten sam kolor, co tekst.

Answer 5

Możesz również użyć tego kodu do podkreślenia o innym kolorze. Użyj granic

h1{ 
    border-bottom: 1px solid #AAAAAA 
} 

edit: można użyć skryptu Java, aby narysować linię pod tekstem

Answer 6

żal ressing stare pytanie, ale miałem ten sam problem i nie znaleźć satysfakcjonująca odpowiedź, więc wymyśliłem inne rozwiązanie i pomyślałem, że podzielę się z tobą.

zawiera obraz tła 1x1 (lub dowolny inny rozmiar), ale jest czysty i prosty - w 100% zgodny z przeglądarką (testowany z IE6 i nowszym).

W tym przykładzie tekst zmienia kolor, a podkreślenie pozostaje takie samo. możesz równie łatwo zrobić to inaczej.

a, a:link, a:active, a:visited{ 
    text-decoration:none; 
    color:#888; 
    background:transparent url('underline.png'); 
    background-position:0 10px; 
    background-repeat:repeat-x; 
} 

a:hover{ 
    color:#009ee0; 
} 

Answer 7

Odpowiedź Paolo Bergantino nie działa dla mnie w Chrome na OS X (v19.0.1084.56). Jednak przesunięcie rozpiętości wewnątrz znaczka zdało się zdziałać.

HTML

<a class="underline" href="#"> 
    <span>Hello world<br />this is a test<br />of changing the underline colour</span> 
</a>​ 

I CSS

.underline{ 
    color: red;   
} 

.underline span{ 
    color: gray;   
} 

Można go zobaczyć tutaj: http://jsfiddle.net/itsmappleby/f4mak/

Answer 8

Albo można użyć granicy. Ta metoda działa w ie6.

HTML

<a href="#" class='underline'> 
    <span>this just</span><br/> 
    <span>a test</span><br/> 
    <span>of underline color</span> 
</a> 

CSS

a.underline { 
    text-decoration: none; 
    } 
    a.underline span { 
    display: inline-block; 
    border-bottom: 1px solid red; 
    font-size: 15px; 
    line-height: 12px; 
    } 

i przykład: http://jsfiddle.net/skanY/1/embedded/result/

Answer 9

wiem, jest to stara sprawa, ale pomyślałem, że dodatek ten ...

a:active, a:link, a:visited{ 
    background-image: linear-gradient(rgba(255,255,255,0)50%, #ff5400 50%); 
    text-decoration: none; 
    background-size: 2px 2px; 
    background-position: 0 1.2em; 
    background-repeat: repeat-x; 
} 

N Uwaga: Starsze wsparcie przeglądarka nie jest w pełni obsługiwana

Answer 10

W przypadku gdy ktoś jest zainteresowany - to pracował dla mnie - text-decoration-color właściwość CSS:

.example { 
    text-decoration: underline; 
    text-decoration-color: red; 
} 

https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color