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

542

下線なしでリンクを白で表示しようとしています。テキストの色は白として正しく表示されますが、青い下線が頑固に持続しています。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>
スニペットを展開

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

css  hyperlink  underline 
— dmr
ソース
1
まあ、text-decoration：noneを実行すると、それはなくなるはずです。これを正しい要素に適用していますか？サンプルコードを提供できますか？
— Davor Lucic、
text-decorationはどこにありますか：何も使用されていませんか？
— シャトル87

回答:

772

予想どおり、text-decoration: none;アンカー（.boxhead a）ではなく、スパン要素（.boxhead）に適用しています。

これを試して：

.boxhead a {
    color: #FFFFFF;
    text-decoration: none;
}
— Davor Lucic
ソース
12
しかし、あなたはテキスト何を持っている場合は、周囲にもスパンを、あなたは周囲のテキストは、リンク下線を持っているしたいのですが、スパン内のテキストがどれを持っていないために？
— JMTyler 2010
4
@rebus、できませんか？何故なの？少なくともIE7以降とFireFox 4以降では可能ですが、何らかの理由でChromeではできません。テストしたChrome以外のブラウザで動作するようにしたコードは次のとおり.toc-list a > span{text-decoration:none !important;} です。@ JMTylerの質問は正当だと思います。同じ解決策を探しています。
— Tony Topper、
7
表示されたtext-decoration上で示唆したように、ネストされたタグに上書きをサポートしていません。いったんa { text-decoration: underline; }ルールを適用すると、たとえばでそれを適用解除することはできませんa .wish_this_were_not_underlined { text-decoration: none; }。これに関するリファレンスは見つかりませんが、それは私の経験です（Chromeで）。
— 曇り
2
上記の他のように、適用によってテキストに下線を引くことができなかったtext-decoration: none;ため、代わりにを使用して行を非表示にすることを選択しましたtext-decoration: underline; text-decoration-color: white;。/ hack
— Ryan Burbidge
1
アンカー全体ではなく、アンカー内の要素から下線を削除しようとしている場合。あなたは、インラインブロックそうのような内部要素を行う必要があります .boxhead .otherPage { display: inline-block; color: #FFFFFF; text-decoration: none; }
— パトリック・デニー
213

アンカータグ（リンク）には、visited、hover、link、activeなどの疑似クラスもあります。スタイルが問題の州に適用されていること、および他のスタイルが競合していないことを確認してください。

例えば：

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

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

— JYelton
ソース
5
a:linkあなたが言うとき、私はあなたが意味するものだと思いますa:click
— artlung
6
これは実際に受け入れられた回答です。ボタンリンクをクリックした後も同じ問題が発生していました。私がページに戻ったとき、訪問したプロパティはまだ紫色に変化していました。
— Doresoom 2016年
33

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

— アレックスK.
ソース
4
設定border-bottom-style: none;は私のためにそれを修正しました。
— Helder Sリベイロ
27

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

style="text-decoration:none;"

例：

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

または、CSSの方法を使用します。 

.classname a {
    color: #FFFFFF;
    text-decoration: none;
}
— ナガラジャンSR
ソース
16

表示されているのは、テキストの下線ではなく、ボックスの影です。

これを試してください（適切なCSSセレクタを使用してください）。

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

    text-decoration: none!important;

    -webkit-box-shadow: none!important;
    box-shadow: none!important;
}
— ジェフジャック
ソース
1
これが答えです。時々、ボックスの影が下線に影響を与えます。
— Bhargav、2017年
それは答えですが、最善ではありません。それらの範囲はグローバルであり、特定のものではありません。このようなことがうまくいくはずです：.otherPage a:link {text-decoration:none;}; 必要に応じて、visited、active、hoverについても同じ手順を繰り返します。
— アジョウィ
14

アンカータグを見逃し 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>
スニペットを展開

テキスト装飾のより標準的なプロパティ

ここに画像の説明を入力してください

— サントシュ・カルセ
ソース
9

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

しかし、あなたはborder-bottom: 1px solid blue;適用されているかもしれないように私には聞こえます。おそらく追加しborder: none;ます。text-decoration: none !importantその通りですが、CSSをオーバーライドしている別のスタイルがある可能性があります。

これは、Firefox Web Developer Toolbarを使用することが素晴らしいところです。そこでCSSを編集して、少なくともFirefoxで機能するかどうかを確認できます。下にありCSS > Edit CSSます。

— Artlung
ソース
9

原則として、「下線」がテキストと同じ色でない場合（「color：」がインラインで上書きされない場合）、「text-decoration：」からのものではなく、「border-bottom：」である必要があります。

疑似クラスの境界も外すことを忘れないでください！

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

このスニペットはアンカー上にあると想定し、それに応じてラッパーに変更します。根本的な原因を追跡した後、「！important」の代わりに特定性を使用します。

— ジョエル・クロフォード・スミス
ソース
4

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

a {
   text-decoration:none;
}

これにより、ページ上のすべてのシングルリンクから下線が削除されます。

— yarz-tech
ソース
他のリンクに下線が必要になる可能性があるため、アンカータグとインラインの方が適切であることを確認してください。
— Asuquo12 2019年
2

場合text-decoration: noneやborder: 0仕事がない、あなたのHTMLにインラインスタイルを適用してみてください。

— デケ
ソース
1

プロパティを使用するだけ

border:0;

そしてあなたは覆われています。テキスト装飾プロパティdintがまったく機能するとき、私にとっては完璧に機能しました。

— MK Sandhu
ソース
1

答えはどれもうまくいきませんでした。私の場合、標準がありました

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

私のコードで。基本的に、リンクが何であれ、テキストの色は青になり、リンクは何であれ残ります。

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

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

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

— ネオ
ソース
0

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

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

コードビハインド：

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

間違ったセレクターでtext-decoration noneを使用しました。装飾に必要なタグを確認する必要があります。

このコードを使用できます

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

または

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

または

a{text-decoration: none !important;}
— Md Abul Bashar
ソース
0

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

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

— qarly_blue
ソース
0

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

— mwilcox
ソース
0

他の人が指摘したように、ネストされたテキスト装飾スタイルをオーバーライドできないようです...しかし、テキスト装飾色を変更できます。

ハックとして、色を透明に変更しました。

text-decoration-color：透明;
— ベン
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.