Jak usunąć tylko podkreślenie z: przed?

97

Mam zestaw stylizowanych linków używających :beforedo 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>

OptimusCrime
źródło
Cóż, oczywiście chcesz listę ... Użyj elementu UL zamiast kombinacji DIV / P. Wraz z listami dostajesz kule (lub dyski, ...) za darmo ...
Šime Vidas
Dlaczego w twoim przypadku nie użyć listy z niestandardowymi punktorami zamiast akapitami? W przeciwnym razie zastosuj przed zawartością do rodzica p, a nie do samego łączenia.
YuS

Odpowiedzi:

176

Czy można to usunąć?

Tak, jeśli zmienisz styl wyświetlania elementu wbudowanego z display:inline(domyślny) na display:inline-block:

#test p a:before {
    color: #B2B2B2;
    content: "► ";
    display:inline-block;
}

Dzieje się tak, ponieważ specyfikacje CSS mówią :

Gdy jest określony w elemencie wbudowanym lub propagowany do niego, wpływa na wszystkie pola generowane przez ten element i jest dalej propagowany do wszystkich pól na poziomie bloku wejściowego, które dzielą element wbudowany (patrz sekcja 9.2.1.1). […] W przypadku wszystkich innych elementów jest propagowany na dowolne elementy potomne. Należy zauważyć, że dekoracje tekstu niepropagowane do elementów potomnych pływających i bezwzględnie pozycjonowanych ani do zawartości atomowych elementów podrzędnych na poziomie wbudowanym, takich jak bloki i tabele w wierszu .

(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.

Phrogz
źródło
2
Możesz nadpisać text-decoration:underlinezastosowane 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/1529630
Oriol
3
O ile widzę, to nie działa w Internet Explorerze (testowane 8-10). Jakieś pomysły, jak radzić sobie z IE?
Linus Caldwell,
Znalazłem rozwiązanie, które działa również w IE8-11: stackoverflow.com/a/21902566/1607968
LeJared,
53

W 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>
LeJared
źródło
Gdyby przypadek polegał na tym, że w IE8 podkreślanie hiperłącza mogło zostać wyłączone tylko przez <img style="text-decoration:underline">wnętrze (a tu był klucz)<a style="padding:0; border:none;">
Bob Stein
Niestety, tego jsfiddle nie można zweryfikować w IE8, ponieważ jsfiddle nie działa w IE8.
user2867288
Niestety nie udało mi się znaleźć żadnego narzędzia do udostępniania kodu online, które nadal działa z IE8. Do powyższej odpowiedzi dodałem fragment kodu, który możesz po prostu wkleić do pliku html i otworzyć go lokalnie w IE8.
LeJared
Przetestowane i zatwierdzone na IE9, zdarzenie bez dwóch różnych stanów.
saeraphin
Miał link z ikoną w: wcześniej nie miał być podkreślony w stanie spoczynku, a następnie był podkreślony po najechaniu kursorem, ale nie ikona. Oto, co musiałem zrobić, aby przekonać IE do zrobienia tego dobrze: a {text-decoration: none} a: before {text-decoration: underline} a: before {text-decoration: none} (tak naprawdę, najpierw podkreśl, następnie nadpisz brakiem) a: hover {text-decration: underline} a: hover: before {text-decoration: none}
Fake Haak
8

Możesz to zrobić dodając do :beforeelementu:

display: inline-block;
white-space: pre-wrap;

Z display: inline-blockpodkreś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-wraplub white-space: pre.

Demo : http://jsfiddle.net/r42e5/9/

Oriol
źródło
1
+1 za pre-wrappodpowiedź. I był przy użyciu content:'►\a0'(\ A0 = & nbsp;)
hashbrown
1

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/

Wymiona
źródło
Dobry pomysł. Tak właśnie robiłem to wcześniej. Problem polega na tym, że ten link jest tworzony w systemie cms, a nasi klienci sami wypełniają go jako tekst sformatowany.
OptimusCrime,
w jakim języku jest CMS? Czy mógł wypluć link, a następnie zawinąć go w rozpiętość przed wysłaniem do przeglądarki?
Wymię
Firma korzysta z modx. Myślę, że mógłbym to zrobić jako ostatnie wyjście, ale naprawdę chciałem to unieważnić. Chyba to niemożliwe. W każdym razie dzięki.
OptimusCrime,
-1

spróbuj zamiast tego:

#test p:before {
    color: #B2B2B2;
    content: "► ";
    text-decoration: none;
}

czy to wystarczy?

Elen
źródło
Mam może akapity w moim div, więc to nie zadziała. Mimo to dobry pomysł.
OptimusCrime
interesujący, kto wstawił -1, jeśli zaakceptowana odpowiedź sugeruje to samo, ale w innej formie ...
Elen
-4

Użyj tego

#test  p:before {
    color: #B2B2B2;
    content: "► ";

}
Bipin Chandra Tripathi
źródło
nic nie robi. dekoracja tekstu jest ignorowana.
OptimusCrime