Usuń uparte podkreślenie z linku

542

Próbuję wyświetlać łącze w kolorze białym, bez podkreślenia. Kolor tekstu jest wyświetlany poprawnie jako biały, ale niebieskie podkreślenie uparcie się utrzymuje. Próbowałem text-decoration: none;i text-decoration: none !important;w CSS, aby usunąć łącza podkreślenie. Żaden nie działał.

.boxhead .otherPage {
  color: #FFFFFF;
  text-decoration: none;
}

<div class="boxhead">
  <h2>
    <span class="thisPage">Current Page</span>
    <a href="myLink"><span class="otherPage">Different Page</span></a>
  </h2>
</div>

Rozwiń fragment kodu

Jak mogę usunąć niebieskie podkreślenie z linku?

css hyperlink underline

— dmr
źródło

1

Cóż, powinno zniknąć, gdy wykonujesz dekorację tekstu: brak. Czy na pewno zastosujesz to do właściwego elementu? Czy możesz podać przykładowy kod?

— Davor Lucic,

Gdzie jest dekoracja tekstowa: nie jest używana?

— transfer87

771

Tak jak się spodziewałem, nie stosuje się text-decoration: none;do anchor ( .boxhead a), ale do elementu span ( .boxhead).

Spróbuj tego:

.boxhead a {
    color: #FFFFFF;
    text-decoration: none;
}

— Davor Lucic
źródło

12

Ale co, jeśli masz również tekst otaczający zakres i chcesz, aby otaczający tekst miał podkreślony link, ale tekst w zakresie nie ma żadnego?

— JMTyler

4

@rebus, nie możesz? Dlaczego nie? Bo przynajmniej w IE7 + i FireFox 4+ możesz, ale z jakiegoś powodu nie w Chrome. Oto kod do pracy w testowanych przeglądarkach innych niż Chrome: .toc-list a > span{text-decoration:none !important;} Myślę, że pytanie @ JMTyler jest uzasadnione; Szukam tego samego rozwiązania.

— Tony Topper

7

Wygląda na text-decorationto, że nie obsługuje przesłonięcia zagnieżdżonych znaczników, jak wspomniano powyżej. Po a { text-decoration: underline; }zastosowaniu reguły nie można jej cofnąć, np a .wish_this_were_not_underlined { text-decoration: none; }. Za pomocą . Nie mogę znaleźć odniesienia do tego, ale takie jest moje doświadczenie (w Chrome).

— Częściowe zachmurzenie

2

Podobnie jak inni powyżej, nie byłem w stanie usunąć podkreślenia z tekstu przez zastosowanie, text-decoration: none;więc zamiast tego postanowiliśmy ukryć linię za pomocą text-decoration: underline; text-decoration-color: white;. / hack

— Ryan Burbidge

1

jeśli próbujesz tylko usunąć podkreślenie z elementu wewnątrz kotwicy, a nie całą kotwicę. musisz uczynić wewnętrzny element blokiem wewnętrznym, takim jak: .boxhead .otherPage { display: inline-block; color: #FFFFFF; text-decoration: none; }

— Patrick Denny

213

Tag zakotwiczenia (link) ma również pseudoklasy, takie jak odwiedzane, najechanie kursorem, link i aktywne. Upewnij się, że Twój styl jest zastosowany do danych stanów i że żaden inny styl nie jest w konflikcie.

Na przykład:

a:hover, a:visited, a:link, a:active
{
    text-decoration: none;
}

Zobacz W3.org, aby uzyskać więcej informacji na temat pseudoklas użytkowników: hover ,: active i: focus.

— JYelton
źródło

5

Myślę, że masz na myśli, a:linkkiedy mówisza:click

— artlung

6

To powinna być faktycznie zaakceptowana odpowiedź, ponieważ miałem ten sam problem PO kliknięciu mojego łącza przycisku. Odwiedzana nieruchomość wciąż zmieniała kolor na fioletowy, kiedy wróciłem na stronę.

— Doresoom,

33

text-decoration: none !importantpowinienem to usunąć. Czy jesteś pewien, że nie border-bottom: 1px solidczai się? (Śledź obliczony styl w Firebug / F12 w IE)

— Alex K.
źródło

4

Ustawienie border-bottom-style: none;naprawiło to dla mnie.

— Helder S Ribeiro

27

Po prostu dodaj ten atrybut do tagu kotwicy

style="text-decoration:none;"

Przykład:

<a href="page.html"  style="text-decoration:none;"></a>

Lub skorzystaj z CSS.

.classname a {
    color: #FFFFFF;
    text-decoration: none;
}

— Nagarajan SR
źródło

16

Czasami to, co widzisz, to cień, a nie podkreślenie tekstu.

Spróbuj tego (używając dowolnych selektorów CSS, które są dla Ciebie odpowiednie):

a:hover, a:visited, a:link, a:active {

    text-decoration: none!important;

    -webkit-box-shadow: none!important;
    box-shadow: none!important;
}

— jeffmjack
źródło

1

To powinna być odpowiedź. Czasami cień pola daje efekt podkreślenia.

— Bhargav

To odpowiedź, ale nie najlepsza. Ich zakres jest globalny i nieokreślony. Coś jak to powinno załatwić sprawę: .otherPage a:link {text-decoration:none;}; powtórz to dla odwiedzonych, aktywnych i najedź kursorem w razie potrzeby.

— Ajowi

14

Przegapiłeś text-decoration:nonedla tagu zakotwiczenia . Więc kod powinien być następujący.

.boxhead a {
    text-decoration: none;
}

<div class="boxhead">
    <h2>
        <span class="thisPage">Current Page</span>
        <a href="myLink"><span class="otherPage">Different Page</span></a>
    </h2>
</div>

Rozwiń fragment kodu

Bardziej standardowe właściwości do dekoracji tekstu

— Santosh Khalse
źródło

9

Trudno spekulować, nie widząc strony.

Ale dla mnie brzmi to tak, jakbyś mógł border-bottom: 1px solid blue;być zastosowany. Być może dodaj border: none;. text-decoration: none !importantma rację, możliwe jest, że masz inny styl, który wciąż zastępuje ten CSS.

W tym miejscu korzystanie z paska narzędzi Firefox Web Developer Tool jest niesamowite. Możesz edytować plik CSS i sprawdzić, czy wszystko działa, przynajmniej w przeglądarce Firefox. Jest poniżej CSS > Edit CSS.

— artlung
źródło

9

Z reguły jeśli „podkreślenie” nie jest tego samego koloru co tekst [a „kolor:” nie jest nadpisany w wierszu], nie pochodzi od „dekoracji tekstu:” Musi być „border-bottom:”

Nie zapomnij też zdjąć granicy ze swoich pseudo klas!

a, a:link, a:visited, a:active, a:hover {border:0!important;}

Ten fragment kodu zakłada się, że jest zakotwiczony, zmień odpowiednio na jego opakowanie i użyj specyficzności zamiast „! Ważne” po wyśledzeniu głównej przyczyny.

— Joel Crawford-Smith
źródło

4

Podczas gdy inne odpowiedzi są poprawne, istnieje łatwy sposób na pozbycie się podkreślenia na wszystkich tych nieznośnych linkach:

a {
   text-decoration:none;
}

Spowoduje to usunięcie podkreślenia z KAŻDEGO POŁĄCZENIA na Twojej stronie!

— yarz-tech
źródło

upewnij się, że jest on na tagu zakotwiczonym i wstawionym, może być lepszy, ponieważ możesz chcieć podkreślenia w innych linkach.

— Asuquo12

2

Jeśli text-decoration: nonelub border: 0nie działa, spróbuj zastosować styl wbudowany w pliku HTML.

— Deke
źródło

1

Po prostu użyj nieruchomości

border:0;

i jesteś objęty ubezpieczeniem. Działa idealnie dla mnie, gdy w ogóle nie działa właściwość dekorowania tekstu.

— MK Sandhu
źródło

1

Żadna z odpowiedzi nie działała dla mnie. W moim przypadku istniał standard

a:-webkit-any-link {
text-decoration: underline;

w moim kodzie. Zasadniczo bez względu na link, kolor tekstu zmienia się na niebieski, a link pozostaje niezmieniony.

Więc dodałem kod na końcu nagłówka w następujący sposób:

<head>
  </style>
    a:-webkit-any-link {
      text-decoration: none;
    }
  </style>
</head>

i problemu już nie ma.

— Neo
źródło

1

  a {
    color: unset;
    text-decoration: unset;
  }

— itzhar
źródło

0

Oto przykład formantu LinkButton asp.net:

 <asp:LinkButton ID="lbmmr1" runat="server" ForeColor="Blue" />

Kod za:

 lbmmr1.Attributes.Add("style", "text-decoration: none;")

— JoshYates1980
źródło

0

W niewłaściwym selektorze nie użyto dekoracji tekstowej. Musisz sprawdzić, który tag potrzebujesz do dekoracji.

Możesz użyć tego kodu

.boxhead h2 a{text-decoration: none;}

LUB

.boxhead a{text-decoration: none !important;}

LUB

a{text-decoration: none !important;}

— Md Abul Bashar
źródło

0

Umieść następujący kod HTML przed <BODY>tagiem:

<STYLE>A {text-decoration: none;} </STYLE>

— qarly_blue
źródło

0

W moim przypadku źle sformatowałem HTML. Link znajdował się w <u>tagu, a nie w <ul>tagu.

— mwilcox
źródło

0

Jak zauważyli inni, wygląda na to, że nie możesz przesłonić zagnieżdżonych stylów dekoracji tekstu ... ALE możesz zmienić kolor dekoracji tekstu.

Jako hack zmieniłem kolor na przezroczysty:

tekst-dekoracja-kolor: przezroczysty;

— Ben
źródło