css 貼り方 Wikipediaのような外部リンクをどうやってスタイルできますか?




発リンク (3)

これは他の回答とよく似ていますが、httpとhttpsの両方で短くて甘いです。 もちろん、内部URLに二重スラッシュを使用すると問題が発生しますが、とにかく実行するべきではありません( these questions see )。

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 */);
}

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

これらのリンクの右側に小さなアイコンを追加したいのですが、他のテキストを隠すことはありません。

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

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

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

これは内部リンクです:

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

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


demo

基本

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

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

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

これは、一般的にhttp://google.comhttps://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としexample.org 。この目的のためにblog.example.orgへのリンクを同じドメインとしてマークしたいとしexample.org 。 これはかなり安全な方法ですが、 http://example.org/page//blog.example.org/ //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;
}

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

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..com"]  {
    background: none;
    padding-right: 0;
}






progressive-enhancement