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>

Rozwiń fragment

— 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

Możliwy duplikat stackoverflow.com/questions/8536015/ ...

— Oriol

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 nie są propagowane 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