Entfernen Sie hartnäckige Unterstreichungen vom Link

Ich versuche, einen Link in Weiß ohne Unterstreichung anzuzeigen. Die Textfarbe wird korrekt als Weiß angezeigt, aber die blaue Unterstreichung bleibt hartnäckig bestehen. Ich habe versucht text-decoration: none;und text-decoration: none !important;im CSS den Link unterstrichen zu entfernen. Beides hat nicht funktioniert.

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

Wie kann ich die blaue Unterstreichung aus dem Link entfernen?

Wie erwartet haben Sie keine Anwendung text-decoration: none;auf einen Anker ( .boxhead a), sondern auf ein span-Element ( .boxhead).

Versuche dies:

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

Das Ankertag (Link) hat auch Pseudoklassen wie besucht, schweben, verknüpfen und aktiv. Stellen Sie sicher, dass Ihr Stil auf die betreffenden Status angewendet wird und dass keine anderen Stile in Konflikt stehen.

Zum Beispiel:

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

Weitere Informationen zu Benutzeraktions- Pseudoklassen finden Sie unter W3.org : hover ,: active und: focus.

text-decoration: none !importantsollte es entfernen .. Sind Sie sicher, dass es nicht border-bottom: 1px solidlauert? (Verfolgen Sie den berechneten Stil in Firebug / F12 im IE)

Fügen Sie dieses Attribut einfach Ihrem Ankertag hinzu

style="text-decoration:none;"

Beispiel:

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

Oder verwenden Sie den CSS-Weg.

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

Manchmal sehen Sie einen Kastenschatten, keine Textunterstreichung.

Versuchen Sie dies (mit den für Sie geeigneten CSS-Selektoren):

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

    text-decoration: none!important;

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

Sie haben text-decoration:nonedas Ankertag verpasst . Der Code sollte also folgen.

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

Weitere Standardeigenschaften für die Textdekoration

Ohne die Seite zu sehen, schwer zu spekulieren.

Aber es klingt für mich so, als ob Sie ein border-bottom: 1px solid blue;Wesen haben könnten . Vielleicht hinzufügen border: none;. text-decoration: none !importantist richtig, es ist möglich, dass Sie einen anderen Stil haben, der dieses CSS immer noch überschreibt.

Hier ist die Verwendung der Firefox Web Developer-Symbolleiste fantastisch. Sie können das CSS direkt dort bearbeiten und prüfen, ob die Dinge funktionieren, zumindest für Firefox. Es ist unter CSS > Edit CSS.

Wenn Ihre "Unterstreichung" nicht die gleiche Farbe wie Ihr Text hat [und die 'Farbe:' nicht inline überschrieben wird], kommt sie in der Regel nicht von "Textdekoration:". Sie muss "Rand unten" sein.

Vergessen Sie nicht, auch Ihren Pseudoklassen die Grenze zu nehmen!

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

Dieses Snippet nimmt an, dass es sich auf einem Anker befindet, ändert es entsprechend in seinen Wrapper ... und verwendet Spezifität anstelle von "! Important", nachdem Sie die Grundursache aufgespürt haben.

Während die anderen Antworten richtig sind, gibt es eine einfache Möglichkeit, die Unterstreichung all dieser lästigen Links zu entfernen:

a {
   text-decoration:none;
}

Dadurch wird die Unterstreichung von JEDEM EINZELNEN LINK auf Ihrer Seite entfernt!

Wenn text-decoration: noneoder border: 0nicht funktioniert, versuchen Inline - Stil in Ihrem HTML - Anwendung.

Nutzen Sie einfach die Eigenschaft

border:0;

und du bist gedeckt. Hat perfekt für mich funktioniert, wenn die Textdekoration überhaupt nicht funktioniert.

Keine der Antworten hat bei mir funktioniert. In meinem Fall gab es einen Standard

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

in meinem Code. Unabhängig davon, um welchen Link es sich handelt, wird die Textfarbe blau und der Link bleibt unverändert.

Also habe ich den Code am Ende des Headers folgendermaßen hinzugefügt:

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

und Problem ist nicht mehr.

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

Hier ist ein Beispiel für das LinkButton-Steuerelement von asp.net:

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

Code dahinter:

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

Sie haben keine Textdekoration in der falschen Auswahl verwendet. Sie müssen überprüfen, welches Tag Sie für die Dekoration benötigen.

Sie können diesen Code verwenden

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

ODER

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

ODER

a{text-decoration: none !important;}

Fügen Sie den folgenden HTML-Code vor das <BODY>Tag ein:

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

In meinem Fall hatte ich HTML schlecht geformt. Der Link befand sich innerhalb eines <u>Tags und nicht innerhalb eines <ul>Tags.

Wie andere betonten, können Sie verschachtelte Textdekorationsstile anscheinend nicht überschreiben ... ABER Sie können die Textdekorationsfarbe ändern.

Als Hack habe ich die Farbe so geändert, dass sie transparent ist:

Textdekorationsfarbe: transparent;