19

ホバーすると下線が引かれるテキストリンクがあります。リンクの先頭に>、次のコードを使用してシンボルを追加しています。

.box.blueb a { color: #0098aa; }
.box.blueb a:hover { text-decoration: underline; }
.box.blueb a:before { content: "> "; }
.box.blueb a:before:hover { text-decoration: none; }

>ただし、リンクにカーソルを合わせたときに記号に下線を付けたくない場合。どうすればこれを達成できますか？

4

6 に答える 6

14

http://jsfiddle.net/thirtydot/LmvgM/1/

：span内のテキストを囲む必要があります。a

<div class="box blueb">
    <a href="#"><span>Hello</span></a>
</div>

次に、CSSを次のように変更します。

.box.blueb a { color: #0098aa; text-decoration: none; }
.box.blueb a:hover > span { text-decoration: underline; }
.box.blueb a:before { content: "> "; }

.box.blueb a:before:hover { text-decoration: none; }text-decoration: underline要素（a）を設定すると、子孫（ ）で削除できない:beforeため、は機能しません。

于 2011-12-16T15:18:23.660 に答える
10

http://jsfiddle.net/LmvgM/8/

これは、cssのみで実現でき、追加のhtmlマークアップなしで、位置：相対をリンクに設定し、位置：絶対を：コンテンツの前に設定することで実現できます。

この例を使用して...

<div class="box blueb">
    <a href="#">Hello</a>
</div>

... cssは次のようになります：

.box.blueb a { 
    color: #0098aa; 
    position: relative;
    margin-left: 5px;
    padding-left: 10px;
    text-decoration: none;
}

.box.blueb a:before { 
    content: "> "; 
    position: absolute;
    top: 0;
    left: 0;
}

.box.blueb a:hover {
    text-decoration: underline;
}
于 2013-03-27T13:26:59.300 に答える
7

要素に追加display: inline-blockするだけでcssを実行できます。:before

.box.blueb a { color: #0098aa; }
.box.blueb a:hover { text-decoration: underline; }
.box.blueb a:before { content: "> "; display:inline-block; }

デモ： http： //jsfiddle.net/CaNyx/

編集：

問題は、スペースが表示されていないことですが、またはdisplay: inline-blockで修正できますwhite-space: prewhite-space: pre-wrap

デモ： http： //jsfiddle.net/CaNyx/1/

于 2013-06-27T14:57:56.713 に答える
6

CSSのみのソリューションが必要な場合は、これを試してください。IEで機能させるには、疑似要素に対してオフにする前に、明示的にオンにする必要があります。

a {text-decoration:none;}
a:hover {text-decoration:underline;}
a:before { text-decoration:underline;}
a:before,
a:hover:before {text-decoration:none;}

したがって、あなたの例では、それを書く必要があります：

.box.blueb a { text-decoration:none; }
.box.blueb a:hover { text-decoration: underline; }
.box.blueb a:before { text-decoration: underline; }
.box.blueb a:before,
.box.blueb a:before:hover { text-decoration: none; }
于 2015-07-10T00:14:32.630 に答える
0

この質問は、：hover：before text-decorationでも質問されましたが、効果はありませんか？と答えhttps://stackoverflow.com/a/13376725/261747はIEでも私のために働いた。

于 2013-12-16T09:31:06.483 に答える
0

これは、コンテンツに下線が引かれる前にアンカーを停止する方法に答えていないことを私は知っています。
しかし、この動作が必要なときに見つけた最善の回避策は、を使用しないこと a:beforeです。

HTML： 

<nav class="breadcrumb">
    <span><a href="#">Test 1</a></span>
    <span><a href="#">Test 2</a></span>
    <span><a href="#">Test 3</a></span>
</nav>

CSS： 

nav.breadcrumb > span:before             { content: "> "; }
nav.breadcrumb > span:first-child:before { content: "";   }

したがって、:beforeアンカー自体ではなく、アンカーをラップする要素に疑似クラスを指定することが、現時点での最善の解決策のように思われます。

リストを使用したい場合の別の例：

HTML： 

<ul class="breadcrumb">
    <li><a href="#">Test 1</a></li>
    <li><a href="#">Test 2</a></li>
    <li><a href="#">Test 3</a></li>
</ul>

CSS： 

ul.breadcrumb                         { margin: 0; padding: 0; }
ul.breadcrumb > li                    { display: inline;       }
ul.breadcrumb > li:before             { content: "> ";         }
ul.breadcrumb > li:first-child:before { content: "";           }
于 2014-04-05T11:07:31.430 に答える