it-swarm.com.de

Entfernen Sie hartnäckige Unterstriche vom Link

Ich versuche, einen Link in Weiß ohne Unterstrich anzuzeigen. Die Textfarbe wird korrekt als Weiß angezeigt, die blaue Unterstreichung ist jedoch hartnäckig. Ich habe versucht, text-decoration: none; und text-decoration: none !important; im CSS, um den Link unterstrichen zu entfernen. Weder funktionierte. 

Das HTML:

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

Das CSS:

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

Wie kann ich die blaue Unterstreichung vom Link entfernen?

448
dmr

Wie erwartet, wenden Sie text-decoration: none; nicht auf einen Anker (.boxhead a), sondern auf ein span-Element (.boxhead) an.

Versuche dies:

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

Das Anker-Tag (Link) enthält auch Pseudo-Klassen wie zB Besuch, Schwebeflug, Link und Aktiv. Stellen Sie sicher, dass Ihr Stil auf den 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;
}

Unter W3.org finden Sie weitere Informationen zu den Pseudoklassen von user action: hover,: active und: focus.

186
JYelton

text-decoration: none !important sollte es entfernen .. Sind Sie sicher, dass kein border-bottom: 1px solid lauert? (Verfolgen Sie den berechneten Stil in Firebug/F12 im IE.)

27
Alex K.

Fügen Sie dieses Attribut einfach zu Ihrem Anker-Tag hinzu

style="text-decoration:none;"

Beispiel:

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

Oder nutzen Sie die CSS-Methode. 

.classname a {
    color: #FFFFFF;
    text-decoration: none;
}
23
Nagarajan S R

Manchmal ist das, was Sie sehen, ein Boxschatten, kein Textunterstrich.

Versuchen Sie Folgendes (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;
}
11
jeffmjack

Sie haben text-decoration:none für das anchor-Tag 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

 enter image description here

9
Santosh Khalse

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

Vergiss nicht, auch die Grenze von deinen Pseudoklassen zu nehmen!

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

Dieses Snippet geht davon aus, dass es sich um einen Anker handelt. Wechseln Sie entsprechend in seinen Wrapper ... und verwenden Sie statt "! Important" die Spezifität, nachdem Sie die Ursache ermittelt haben.

7

Ohne die Seite zu sehen, schwer zu spekulieren.

Aber es klingt für mich, als könnten Sie einen border-bottom: 1px solid blue; anwenden. Vielleicht fügen Sie border: none; hinzu. text-decoration: none !important ist richtig, es ist möglich, dass Sie einen anderen Stil haben, der das CSS jedoch überschreibt.

Hier ist die Verwendung der Firefox Web Developer Toolbar fantastisch. Sie können das CSS direkt dort bearbeiten und sehen, ob alles funktioniert, zumindest für Firefox. Es steht unter CSS > Edit CSS.

7
artlung

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

a {
   text-decoration:none;
}

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

2
yarz-tech

Nutzen Sie einfach die Immobilie

border:0;

und du bist bedeckt. Funktionierte perfekt für mich, wenn Textdekorationsobjekte überhaupt funktionieren.

1
MK Sandhu

Keine der Antworten funktionierte für mich. In meinem Fall gab es einen Standard 

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

in meinem Code. Was auch immer der Link ist, die Textfarbe wird blau und der Link bleibt, was er ist.

Also habe ich den Code am Ende der Kopfzeile so hinzugefügt: 

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

und problem ist nicht mehr.

1
Neo

Sie haben in der falschen Auswahl keine Textdekoration verwendet. Sie müssen prüfen, welches Tag Sie zur Dekoration benötigen. 

Sie können diesen Code verwenden

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

OR

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

OR

a{text-decoration: none !important;}
0
Md Abul Bashar

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

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

Code dahinter:

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

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

0
mwilcox

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

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

0
qarly_blue

Wenn text-decoration: none oder border: 0 nicht funktioniert, wenden Sie einen Inline-Stil in Ihrer HTML-Datei an.

0
Deke