web-dev-qa-db-ja.com

頑固な下線をリンクから削除する

下線なしでリンクを白で表示しようとしています。テキストの色は白として正しく表示されますが、青い下線は頑固に残っています。私はCSSでtext-decoration: none;とtext-decoration: none !important;を試してリンクのアンダーラインを取り除きました。どちらもうまくいきませんでした。

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

リンクから青い下線を削除するにはどうすればよいですか。

csshyperlinkunderline
467
dmr

予想通り、text-decoration: none;をアンカー（.boxhead a）に適用するのではなく、span要素（.boxhead）に適用しています。

これを試して：

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

アンカータグ（link）には、visit、hover、link、activeなどの擬似クラスもあります。あなたのスタイルが問題の状態に適用されていること、そして他のスタイルが衝突していないことを確認してください。

例えば：

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

ユーザーアクション擬似クラス：hover、：active、および：focusの詳細については、 W3.org を参照してください。

190
JYelton

text-decoration: none !importantはそれを削除する必要があります.. border-bottom: 1px solidが潜んでいないことを確認していますか？ （IEのFirebug/F12で計算されたスタイルをトレースします）

28
Alex K.

この属性をアンカータグに追加するだけです。

style="text-decoration:none;"

例：

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

またはCSSの方法を使います。

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

時々あなたが見ているのはテキストの下線ではなく箱の影です。

これを試してください（あなたに適したCSSセレクターを使ってください）：

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

    text-decoration: none!important;

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

アンカータグ にtext-decoration:noneがありませんでした。そのため、コードは次のようになります。

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

テキスト装飾のより標準的な特性

enter image description here

11
Santosh Khalse

原則として、あなたの "アンダーライン"があなたのテキストと同じ色でない場合（そして 'color：'はインラインでオーバーライドされない場合）、それは "text-decoration："から来ているのではありません。

疑似クラスから境界線を外すことも忘れないでください。

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

このスニペットはアンカーを前提としており、それに応じてラッパーに変更します。根本的な原因を突き止めた後は、「！important」の代わりに「specific」を使用します。

8
Joel Crawford-Smith

ページを見ないで、推測するのは難しいです。

しかし、border-bottom: 1px solid blue;が適用されている可能性があるようです。おそらくborder: none;を追加してください。 text-decoration: none !importantは正しいです、あなたはまだそのCSSを上書きしている別のスタイルを持っている可能性があります。

ここで Firefox Web Developer Toolbar を使うのは素晴らしいことです。少なくともFirefoxでは、CSSをその場で編集して問題ないかどうかを確認できます。 CSS > Edit CSSの下です。

7
artlung

他の答えは正しいですが、これらすべての厄介なリンクの下線を取り除く簡単な方法があります。

a {
   text-decoration:none;
}

これであなたのページのEVERY SINGLE LINKから下線が消えます！

2
yarz-tech

プロパティを使うだけ

border:0;

そしてあなたは覆われています。テキストデコレーションプロパティdintがまったくうまくいったとき、私のために完璧に働いた。

1
MK Sandhu

答えのどれも私のために働きませんでした。私の場合は標準がありました

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

私のコードでは。基本的にそれがどんなリンクであっても、テキストの色は青くなり、そしてリンクはそれがどんなものであってもそのままです。

だから私はこのようにヘッダの最後にコードを追加しました：

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

そして問題はもうありません。

1
Neo

あなたは間違ったセレクタでテキスト装飾なしを使用しました。どのタグが装飾に必要なのかを確認する必要があります。

あなたはこのコードを使うことができます

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

OR

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

OR

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

Asp.net webforms LinkBut​​tonコントロールの例を次に示します。

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

コードビハインド：

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

私の場合、HTMLの形式が不十分でした。リンクは<u>タグではなく、<ul>タグ内にありました。

0
mwilcox

<BODY>タグの前に次のHTMLコードを配置します。

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

0
qarly_blue

text-decoration: noneまたはborder: 0が機能しない場合は、HTMLにインラインスタイルを適用してみてください。

0
Deke