32

CSSだけで外部リンクと内部リンクを区別したい。

これらのリンクの右側に小さなアイコンを追加して、他のテキストを覆い隠しないようにしたいと考えています。

使いたいアイコンはウィキペディアで使われているアイコンです。

たとえば、これは外部リンクです。

<a href="http://stackoverflow.com">StackOverflow</a>

これは内部リンクです:

<a href="/index.html">home page</a>

望ましい結果のサンプル

CSSだけでこれを行うにはどうすればよいですか？

4

3 に答える 3

36

デモ

基本

を使用:afterすると、一致した各セレクターの後にコンテンツを挿入できます。

最初のセレクターは、hrefで始まるすべての属性に一致します//。これは、現在のページと同じプロトコル (http または https) を維持するリンク用です。

a[href^="//"]:after,

これらは、http: //google.comやhttps://encrypted.google.comなどの従来より一般的な URL です。

a[href^="http://"]:after, 
a[href^="https://"]:after {

次に、URL を content 属性に渡して、リンクの後に画像を表示できます。マージンは、

  content: url(http://upload.wikimedia.org/wikipedia/commons/6/64/Icon_External_Link.png);
  margin: 0 0 0 5px;
}

特定のドメインをローカルとして許可する

example.orgこの目的のために、リンクをblog.example.org同じドメインにあるものとしてマークしたいとしましょう。これはかなり安全な方法ですが、 http: //example.org/page//blog.example.org/ のような URL にすることもできます。

注：これがスタイルの上記の後にあることを確認してください

a[href*="//blog.example.org/"]:after {
  content: '';
  margin: 0;
}

より厳密に一致させるために、初期設定を取得して上書きすることができます。

a[href^="//blog.example.org/"]:after, 
a[href^="http://blog.example.org/"]:after, 
a[href^="https://blog.example.org/"]:after {
  content: '';
  margin: 0;
}
于 2013-08-11T02:52:14.630 に答える
9

これは、問題を簡単に解決するのに役立つと思います。

CSS で外部リンクの後にオフサイト リンク アイコンを追加する

記事からの引用：

これにより、すべてのリンクが最終的に外部リンク アイコンでスタイル設定されます。

a[href^="http://"] {
    background: url(http://upload.wikimedia.org/wikipedia/commons/6/64/Icon_External_Link.png)     center right no-repeat;
    padding-right: 13px;
}

次のコードは、特定の URL で外部アイコン スタイルを防止します。

a[href^="http://www.stackoverflow.com"]  {
    background: none;
    padding-right: 0;
}
于 2013-12-24T06:56:43.677 に答える
7

OK、これは他の回答とかなり似ていますが、短くて甘く、http と https の両方で機能します。もちろん、内部 URL で二重スラッシュを使用すると問題が発生しますが、とにかく使用しないでください (これらの質問を参照 してください)。 

a:not([href*="//"]) {
    /* CSS for internal links */
}

a[href*="//"] {
    /*CSS for external links */
}

すべてのリンクにとのタグを付ける前に、このことを知っていればよかったのにと思います。 class="internal"class="external"

すでに述べたように、画像を追加するには：

a[href*="//"]::after {
    content: url(/* image URL here */);
}
于 2015-10-25T18:52:57.367 に答える