web-dev-qa-db-ja.com

CSS：外部リンクのスタイル

ウェブサイト（Wordpress）のすべての外部リンクのスタイルを設定したい。私が試しているのは：

.post p a[href^="http://"]:after

しかし、Wordpress URL全体をリンクに入れてください...では、 http://www.mywebsite.com で始まらないすべてのリンクのスタイルを設定するにはどうすればよいですか？ =？

ありがとうございました。

cssurlcss-selectorsurihref
32
thom

いくつかの特別なCSS構文を使用すると、これを簡単に行うことができます。 HTTPプロトコルとHTTPSプロトコルの両方で機能する1つの方法を次に示します。

a[href^="http://"]:not([href*="example.com"]):after,
a[href^="https://"]:not([href*="example.com"]):after{
    content: " (EXTERNAL)" 
}

ここ をクリックすると、この例を表示できます。

47
Shaz

このように、外部リンクALAWikipediaが表示されます。

a[href^="http"]:after {
     content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=);
}

例はここにあります： http://jsfiddle.net/ZkbKp/

10
superlogical

@superlogical + @Shazを組み合わせて、Foundation WPテーマ...

a[href^="http://"]:not([href*="maggew.com"]):after {
     content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=);    
}

このHTMLスニペットを使用して、サイトでテストできます。

<a href="http://gebfire.com" target="_blank">External</a>

This is a working example, look above to change the color to monochrome


これは私がカスタム画像（ファビコンなど）に使用したものです

a[href^="http://"]:not([href*="magew.com"]):after {
     content: " " url('/wp-content/uploads/2014/03/favicon.png');    
}

This is a working example, look for the favicon - see it?

4
Uncle Iroh

ハードコーディングを伴わない1つの単純なルール：

a[href*="//"] { /* make me do stuff */ }

すべてのスキームで機能します。入力ミスした内部URLを識別するという追加の利点があります。外部にリダイレクトするクロークされた内部リンクの場合は、相対URLの前に//を付けるだけです。

クレジットは、2012年にCSS-Tricksで このスニペットを残した であるMarkBattistellaに与えられます。

更新：実際の使用に基づくすべての絶対リンクのスタイルを設定するため、上記は個人的に問題があることがわかりましたこれは、状況によっては予期しないスタイルにつながる可能性があります（たとえば、In Braveで、オフラインで表示するためにページをダウンロードする場合）。私の提案は、代わりにa[rel*="external"]::afterを使用して、外部リンクを装飾することです。

3
Josh Habdas

疑似要素の構文には、「：」ではなく「::」が含まれています。

また、「http：//」や「https：//」ではなく「http」で始まるURLと一致させる必要があるだけです。

したがって、受け入れられた回答やその他の評価された回答が技術的に正しいかどうかはわかりません。

きちんとしたアイコンを含めるには、SVGをCSS変数に配置し、それをCSSルールで使用します。

    --icon-external-link: url('data:image/svg+xml,\
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="-24 -24 48 48"> \
            <defs> \
                <mask id="corner"> \
                    <rect fill="white" x="-24" y="-24" width="48" height="48"></rect> \
                    <rect fill="black" x="2" y="-24" width="22" height="26"></rect> \
                </mask> \
            </defs> \
            <g stroke="blue" fill="blue" stroke-width="4"> \
                <rect x="-20" y="-16" width="32" height="32" rx="7" ry="7" stroke-width="3" fill="none" mask="url(%23corner)"/> \
                <g transform="translate(1,0)" stroke-linecap="square"> \
                    <line x1="0" y1="0" x2="17" y2="-17" stroke-width="6"/> \
                    <polygon points="21 -21, 21 -8, 8 -21" stroke-linejoin="round" stroke-width="3"/> \
                 </g> \
             </g> \
        </svg>');

それは面倒に見えますが、デスクトップパブリッシングアプリケーションに戻らなくても、テーマに合わせて編集できるすっきりとした外部リンクアイコンです。アイコンはスタイルシートの一部であるため、ブラウザに追加のダウンロードを行わせる必要はありません。また、SVGなのでサクサクしています。 「rect」はボックスで、「line」と「polygon」のあるグループは矢印です。すべての数値は整数であり、必要に応じて調整できます。

次に、ルールで次のように参照できます。

a[href^="http"]:not([href*="example.mil"])::after {
    content: '';
    background: no-repeat left .25em center var(--icon-external-link);
    padding-right: 1.5em;
}

一致するリンクはhttpで始まり、ドメイン名が含まれていないリンクです。 「http：//」と「https：//」はどちらも「http」で始まるため、受け入れられた回答に従ってルールを複製する必要はありません。

'//'で始まるプロトコルレスリンクをコンテンツで使用している場合は、これを考慮する必要があります。

また、外部リンクを開く方法について厳密にすることもできます。たとえば、ターゲットブランクアプローチを使用して、常に外部リンクを新しいタブで開きたい場合があります。これを適切に行うには、リンクにtarget="_blank"とrel="noopener noreferrer"を含める必要があります。したがって、これがマークアップに存在しない場所を見つけるには、正しい「rel」属性を持つリンクのみをターゲットにすることができます。

0
Henry's Cat

<a href='http://' target='_blank'>Justin Bieber Fan Club</a>によって外部リンクのターゲットを設定していると仮定すると、次のように再生できます。

CSS：

a[target="_blank"]:after{
     content: " [external]" 
}
0
Andreson Tianth Lima