Mam zestaw stylizowanych linków używających :before
do zastosowania strzałki.
Wygląda dobrze we wszystkich przeglądarkach, ale kiedy zastosuję podkreślenie do łącza, nie chcę, aby część była podkreślona :before
(strzałka).
Zobacz na przykład jsfiddle: http://jsfiddle.net/r42e5/1/
Czy można to usunąć? Styl testowy, z którym siedziałem #test p a:hover:before
, został zastosowany (według Firebuga), ale podkreślenie wciąż tam jest.
Jakiś sposób, aby tego uniknąć?
#test {
color: #B2B2B2;
}
#test p a {
color: #B2B2B2;
text-decoration: none;
}
#test p a:hover {
text-decoration: underline;
}
#test p a:before {
color: #B2B2B2;
content: "► ";
text-decoration: none;
}
#test p a:hover:before {
text-decoration: none;
}
<div id="test">
<p><a href="#">A link</a></p>
<p><a href="#">Another link</a></p>
</div>
html
css
hyperlink
pseudo-element
text-decorations
OptimusCrime
źródło
źródło
Odpowiedzi:
Tak, jeśli zmienisz styl wyświetlania elementu wbudowanego z
display:inline
(domyślny) nadisplay:inline-block
:#test p a:before { color: #B2B2B2; content: "► "; display:inline-block; }
Dzieje się tak, ponieważ specyfikacje CSS mówią :
(Podkreśl moje.)
Demo: http://jsfiddle.net/r42e5/10/
Dziękuję @Oriol za zapewnienie obejścia, które skłoniło mnie do sprawdzenia specyfikacji i sprawdzenia, czy obejście jest legalne.
źródło
text-decoration:underline
zastosowane do elementu nadrzędnego za pomocądisplay:inline-block
. Zobacz przykład: jsfiddle.net/aZdhN/1 . Następnie problem askera można rozwiązać w następujący sposób: stackoverflow.com/a/17347068/1529630W IE8-11 jest błąd , więc
display:inline-block;
samo używanie nie będzie działać.Znalazłem rozwiązanie tego błędu, jawnie ustawiając
text-decoration:underline;
: przed zawartością, a następnie ponownie nadpisując tę regułętext-decoration:none;
a {text-decoration:none;} a:hover {text-decoration:underline;} a:before {content:'>\a0'; text-decoration:underline; display:inline-block;} a:before, a:hover:before {text-decoration:none;}
Przykład roboczy tutaj: http://jsfiddle.net/95C2M/
Aktualizacja: Ponieważ jsfiddle nie działa już z IE8, po prostu wklej ten prosty kod demonstracyjny do lokalnego pliku html i otwórz go w IE8:
<!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> a {text-decoration:none;} a:hover {text-decoration:underline;} a:before {content:'>\a0'; text-decoration:underline; display:inline-block;} a:before, a:hover:before {text-decoration:none;} </style> </head> <body> <a href="#">Testlink</a> With no Underline on hover under before-content </body> </html>
źródło
<img style="text-decoration:underline">
wnętrze (a tu był klucz)<a style="padding:0; border:none;">
Możesz to zrobić dodając do
:before
elementu:display: inline-block; white-space: pre-wrap;
Z
display: inline-block
podkreśleniem znika. Ale wtedy problem polega na tym, że przestrzeń za trójkątem zapada się i nie jest pokazana. Aby to naprawić, możesz użyćwhite-space: pre-wrap
lubwhite-space: pre
.Demo : http://jsfiddle.net/r42e5/9/
źródło
pre-wrap
podpowiedź. I był przy użyciucontent:'►\a0'
(\ A0 = & nbsp;)Zawiń linki w zakresy i dodaj dekorację tekstu do zakresu na a: hover w ten sposób,
a:hover span { text-decoration:underline; }
Zaktualizowałem twoje skrzypce do tego, co myślę, że próbujesz zrobić. http://jsfiddle.net/r42e5/4/
źródło
spróbuj zamiast tego:
#test p:before { color: #B2B2B2; content: "► "; text-decoration: none; }
czy to wystarczy?
źródło
Użyj tego
#test p:before { color: #B2B2B2; content: "► "; }
źródło