logo标签列表

CSS：样式化外部链接

cssurlcss-selectorsurihref
44

我想要为我的网站（WordPress）中的所有外部链接设置样式。我正在尝试以下代码：

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

但是WordPress在链接中放置了整个URL...那么，我如何为所有不以http://www.mywebsite.com开头的链接设置样式呢？

谢谢。

8个回答
72

2021解决方案

a[href]:not(:where(
  /* exclude hash only links */
  [href^="#"],
  /* exclude relative but not double slash only links */
  [href^="/"]:not([href^="//"]),
  /* domains to exclude */
  [href*="//stackoverflow.com"],
  /* subdomains to exclude */
  [href*="//meta.stackoverflow.com"],
)):after {
  content: '↗️';
}
<strong>Internal sites:</strong>
<br>Lorem <a href="http://stackoverflow.com">http://stackoverflow.com</a> ipsum
<br>Lorem <a href="/a/5379820">/a/5379820</a> ipsum
<br>Lorem <a href="//stackoverflow.com/a/5379820">//stackoverflow.com/a/5379820</a> ipsum
<br>Lorem <a href="https://dev59.com/G2435IYBdhLWcg3wfgQf#5379820">https://dev59.com/G2435IYBdhLWcg3wfgQf#5379820</a> ipsum
<br>Lorem <a href="https://dev59.com/G2435IYBdhLWcg3wfgQf#5379820">https://dev59.com/G2435IYBdhLWcg3wfgQf#5379820</a> ipsum
<br>Lorem <a href="https://meta.stackoverflow.com/">https://meta.stackoverflow.com/</a> ipsum
<br>Lorem <a href="ftp://stackoverflow.com">ftp://stackoverflow.com</a> ipsum

<br><br>
<strong>External sites:</strong>
<br>Lorem <a href="ftp://google.com">ftp://google.com</a> ipsum
<br>Lorem <a href="https://google.com">https://google.com</a> ipsum
<br>Lorem <a href="http://google.com">http://google.com</a> ipsum
<br>Lorem <a href="https://www.google.com/search?q=stackoverflow">https://www.google.com/search?q=stackoverflow</a>
<br>Lorem <a href="//www.google.com/search?q=stackoverflow">//www.google.com/search?q=stackoverflow</a>

<br><br>
<strong>Other anchor types</strong>
<br>Lorem <a>no-href</a> ipsum
<br>Lorem <a href="#hash">#hash</a> ipsum

2014年解决方案

使用一些特殊的CSS语法，您可以轻松地实现此功能。以下是一种应该适用于HTTP和HTTPS协议的方法：

a[href^="http://"]:not([href*="stackoverflow.com"]):after,
a[href^="https://"]:not([href*="stackoverflow.com"]):after {
  content: '↗️';
}
弦乐链接出现404错误。类似的示例可以在这里找到：https://codepen.io/simevidas/pen/MKdmeV?editors=0110 - Vasilis Tsirimokos
谢谢你提供这段代码！我在2021年的解决方案中找到了另一个选择器规则：[href^="."]。 - Marijke Luttekes
16

这种方法展示了类似维基百科的外部链接：

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

这里可以找到一个示例：http://jsfiddle.net/ZkbKp/

4
因为原始问题问如何排除具有特定域名的网站。 - Oscar M.
6
以上图标为蓝色，如果需要单色图标，请使用此代码：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNqEkIEJwCAMBGPpEs7hHK6hY+gauoZr6Bo6RtqEWkxb6EMQnuM/USEirIoxSmOKwDkhBEwp4VPkb4801Xun9xW4e+9FldYarLUvkBPPOp4JGWOgtSaSt6VWQKUU9nPOEiSIgAmNMdadFTjn7utqrXwh6fLvH9nXhamW5ksMnpfDnw4BBgBfunO056MmqAAAAABJRU5ErkJggg==。 - cenk
9

一个简单的规则，不涉及硬编码：

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

适用于所有方案。具有识别错误内部URL的附加好处。对于将内部链接伪装为外部链接的链接，只需在相对URL前缀中加上//。

感谢Mark Battistella在2012年在CSS-Tricks上发布此片段。

更新：根据实际使用，我个人发现上述方法存在问题，因为它会为所有绝对链接设置样式，这可能会在某些情况下导致意外的样式（例如，在Brave中，当您下载页面以进行离线查看时）。我的建议是改用a[rel*="external"]::after并装饰您的外部链接。

2
不明白为什么这个没有得到更多的赞。这是一个优雅的解决方案，而且还很有效。 - James
1
OP正在寻找否定，因为WP在任何地方都使用完全限定的URL，所以我的答案实际上并没有解决他们的具体问题。尽管如此，这似乎是一个很好的地方来放置这个有用的代码片段，我喜欢将其与a[rel=external]结合使用。 - vhs
5
我将@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>

这是一个可工作的示例，向上查看以将颜色更改为单色


这是我用于自定义图像（如网站图标）的代码。

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?

只是好奇，这些图片中使用的字体是什么？ - Shaz
1
起初，我以为是PT Sans字体，但我相信它是Open Sans字体--https://www.google.com/fonts/specimen/Open+Sans - Uncle Iroh
再次考虑字体，它也可能来自于这里：http://metroui.org.ua/ - Uncle Iroh
嘿，你能给我入站链接的CSS吗？谢谢。 - Jay Momaya
4
假设您正在为外部链接设置目标：<a href='http://' target='_blank'>Justin Bieber Fan Club</a>，您可以这样操作：

CSS: 

a[target="_blank"]:after{
     content: " [external]" 
}
2
伪元素的语法中使用'::'而不是':'。
另外，只需要匹配以'http'开头的URL，而不是'http://'或'https://'。
因此，我不确定被接受的答案和其他评级答案在技术上是否正确。
要包含一个整洁的图标，可以将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方法。要正确执行此操作，您需要在链接中包括target="_blank"以及rel="noopener noreferrer"。因此，为了查找标记中不存在此属性的链接，您可能只想针对具有正确'rel'属性的链接。
最初的回答中没有解释这些内容，请保留HTML标签。
1

以下是如何使用网站图标图片来为外部链接添加样式：

a[href*="http"] {
    background: url('favicon.png') no-repeat 100% 0;
    background-size: 16px 16px;
    padding-right: 19px;
}

我们设置要插入的图片的路径，指定无重复，这样只会插入一份副本，然后将位置指定为距离文本内容向右100%的位置，并且距离顶部0像素。
0

我喜欢@henryscat分享的方法，但由于不是SVG专家，我很难更改图标。为了让我更容易，我删除了遮罩并仅使用线条创建了图标。在图标定义前面的注释描述了<line/>是图标的哪个部分。

a[target="_blank"]::after {
    content: '';
    background: no-repeat var(--icon-external-link);
    padding-right: 1em;
}

:root {
    /*
    line left
    line right
    line bottom
    line top
    arrow left
    arrow right
    arrow diagonal
    */
    --icon-external-link: url('data:image/svg+xml,\
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"> \
        <g style="stroke:blue;stroke-width:1"> \
            <line x1="5" y1="5" x2="5" y2="14" /> \
            <line x1="14" y1="9" x2="14" y2="14" /> \
            <line x1="5" y1="14" x2="14" y2="14" /> \
            <line x1="5" y1="5" x2="9" y2="5"  /> \
            <line x1="10" y1="2" x2="17" y2="2"  /> \
            <line x1="17" y1="2" x2="17" y2="9" /> \
            <line x1="10" y1="9" x2="17" y2="2" style="stroke-width:1.5" /> \
        </g> \
    </svg>');
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接