6

ナビゲーションでリンクを分離するために、私は以下を設定しました

#menu-main li a:after{
    content: " * ";
}

現在のアイテムが追加されます

text-decoration: underline;

私の今の問題は、「*」にも下線が引かれているが、下線が引かれるべきではないということです。

追加しようとしました

#menu-main li a:after{
    text-decoration: none !important;
}

しかし、効果はありません

誰かがテキストに下線を付けておく方法を知っていますが、：afterコンテンツは持っていませんか？

4

4 に答える 4

6

通常のフローでは、疑似要素は要素の寸法を拡張します。表示されるのは、リンク自体の下線の下線です。追加a:after {text-decoration: line-through;}して確認します。

提案された解決策は次のとおりです：http：//jsfiddle.net/Ronny/Smr38/

基本的にposition: absolute、疑似要素に使用する場合、それらは親要素の寸法に影響を与えなくなるため、下線は適切な場所でカットされます。ポインタイベント、ホバー状態、フォーカスリングなどの処理は引き続き必要ですが、少なくとも後者は理解できるように残しておきます。

于 2012-10-03T13:19:05.027 に答える
3

マークアップを管理している場合は、リンクにスパンを挿入できます

<a href="..."><span>your link</span></a>

このcssを使用します

a { text-decoration: none }
a span { text-decoration: underline }

そうすることで、疑似要素に挿入されたコンテンツ:afterに下線が引かれなくなります

それ以外の場合は、そのスタイルをli:after（可能であれば）次のように適用できます。

#menu-main li:after{
    content: " * ";
}
于 2012-10-03T12:49:48.837 に答える
2

これは古い質問ですが、Googleを使用して見つけたものなので、「親」のサイズに寄与する疑似要素が必要で、絶対位置が何らかの理由でオプションではない場合は、ソリューションを共有したいと思いました。

#menu-main li a:after{
    content: " * ";
    display:inline-block; /* So we can set a width */
    width: 0;
    margin-left: 10px; /* "Size" of the Pseudo-element */
}

幅が0であるため、は表示されませんtext-decoration。これには、受け入れられた回答と比較して、コードとスタイル間の依存関係も少なくなります。

于 2015-07-13T09:43:40.577 に答える
2

私の場合、幅も必要ありません。インラインブロックを追加するだけで機能します。

于 2015-08-25T12:06:36.397 に答える