CSS：样式外部链接

Question

我想为我的网站 (Wordpress) 中的所有外部链接设置样式。我正在尝试：

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

但是 Wordpress 将整个 url 放在链接中...那么，我如何设置所有不以 http://www.mywebsite.com 开头的链接？

谢谢。

Answer 1

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="http://stackoverflow.com/a/5379820">http://stackoverflow.com/a/5379820</a> ipsum
<br>Lorem <a href="https://stackoverflow.com/a/5379820">https://stackoverflow.com/a/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: '↗️';
}

Answer 2

这种方式显示外部链接 ALA 维基百科：

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

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

Answer 3

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

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

适用于所有方案。具有识别输入错误的内部 URL 的额外好处。对于外部重定向的隐藏内部链接，只需在相对 URL 前加上 //。

感谢 Mark Ba​​ttistella，他在 2012 年的 CSS-Tricks 上 left this snippet。

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

Answer 4

我结合了@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 sn-p 在您的网站上进行测试：

<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');    
}

Answer 5

伪元素在语法中使用 '::' 而不是 ':'。

也只需要匹配以“http”而不是“http://”或“https://”开头的 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”属性的链接。

Answer 6

假设您通过<a href='http://' target='_blank'>Justin Bieber Fan Club</a> 设置外部链接的目标 , 你可以玩：

CSS：

a[target="_blank"]:after{
     content: " [external]" 
}

Answer 7

这是您可以使用网站图标图像设置外部链接样式的方法：

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

我们设置要插入的图像的路径，指定 no-repeat 所以我们只插入一个副本，然后将位置指定为文本内容右侧的 100% 和 0 像素从顶部。

Answer 8

我喜欢@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>');
}