1

私の質問の目標は、リンクの後にファイルタイプを追加するコードを作成することです (特別なファイルを期待する必要があるかどうかを人々が知ることができるように)。現在、画像を使用してこれを行うオプションがありますが、私はそれがあまり好きではなく、ファイルの種類を角括弧で囲んで別のサイズにしたいと考えています。私のアプローチは、次の方法で :after 疑似クラスを使用することです

a[href$='.doc']:after, a[href$='.rtf']:after {
content: " [DOC]";
font-family: Monospace;
font-size: 60%;
font-weight:bolder;
color:red;
position:relative;
top: -0.8em;    
}

しかし、これは私に非常に奇妙な問題を引き起こします。コンテンツは、リンクの一部であるブロックにあるようです。したがって、リンクの下線は「[DOC]」の下のリンクの後に続きます。

したがって、質問は非常に簡単です。これを別の方法で行う方法、または「[DOC]」の下にあるものをリンクの下にあるものとは別に制御できるようにする方法はありますか?

4

3 に答える 3

4

display: inline-block; を追加してみてください。

a[href$='.doc']:after, a[href$='.rtf']:after {
content: " [DOC]";
display: inline-block;
font-family: Monospace;
font-size: 60%;
font-weight:bolder;
color:red;
position:relative;
top: -0.8em;    
}

IE ではテストされていませんが、IE は属性セレクターと :after またはその両方に問題があると思います。

于 2011-02-23T12:45:48.450 に答える
3

誰かが急降下してよりクリーンな方法を指摘してくれることを願っていますが、これは機能します：

ライブデモ

HTML：

<a href="lol.doc"><span>lol</span></a>

CSS：

a {
    text-decoration: none
}
a span {
    text-decoration: underline
}
a[href$='.doc']:after, a[href$='.rtf']:after {
    content: " [DOC]";
    font-family: Monospace;
    font-size: 60%;
    font-weight:bolder;
    color:red;
    position:relative;
    top: -0.8em;
}
于 2011-02-23T12:37:42.950 に答える
1

すべて: 画像の方が (ブラウザーのサポートに関して) もう少し堅牢であるように思われるので、おそらく画像に固執します。この場合、プレーンテキストは画像よりも常に簡単である必要があるという私の素朴な世界観は間違っています;)。

于 2011-02-23T20:46:44.577 に答える