web-dev-qa-db-ja.com

ウィキペディアのような外部リンクのスタイルを設定するにはどうすればよいですか？

CSSだけを使用して、外部リンクと内部リンクを区別したいと思います。

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

私が使用したいアイコンは Wikipediaで使用されているアイコン です。

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

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

これは内部リンクです：

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

sample of desired result

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

cssprogressive-enhancement
29
Brigand

デモ

基本

: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: 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;
}
35
Brigand

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

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;
}
8
eagles

OK、これは他の回答とかなり似ていますが、短くて甘いので、httpとhttpsの両方で機能します。もちろん、内部URLで二重スラッシュを使用すると問題が発生しますが、とにかくそれを行うべきではありません（ seethesequestions =）。

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

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

私はこれについて知っていればいいのですがbeforeすべてのリンクにclass="internal"とclass="external"のタグを付けました。

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

a[href*="//"]::after {
    content: url(/* image URL here */);
}
7
Keith