CSS：样式外部链接

Posted 2023-03-05

【中文标题】CSS：样式外部链接

【英文标题】：CSS: Style external links

【发布时间】：2011-07-19 18:45:43

【问题描述】：

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

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

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

谢谢。

【参考方案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*="//***.com"],
  /* subdomains to exclude */
  [href*="//meta.***.com"],
)):after 
  content: '↗️';

<strong>Internal sites:</strong>
<br>Lorem <a href="http://***.com">http://***.com</a> ipsum
<br>Lorem <a href="/a/5379820">/a/5379820</a> ipsum
<br>Lorem <a href="//***.com/a/5379820">//***.com/a/5379820</a> ipsum
<br>Lorem <a href="http://***.com/a/5379820">http://***.com/a/5379820</a> ipsum
<br>Lorem <a href="https://***.com/a/5379820">https://***.com/a/5379820</a> ipsum
<br>Lorem <a href="https://meta.***.com/">https://meta.***.com/</a> ipsum
<br>Lorem <a href="ftp://***.com">ftp://***.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=***">https://www.google.com/search?q=***</a>
<br>Lorem <a href="//www.google.com/search?q=***">//www.google.com/search?q=***</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*="***.com"]):after,
a[href^="https://"]:not([href*="***.com"]):after 
  content: '↗️';

【讨论】：

小提琴链接给出了 404。类似的例子可以在这里找到：codepen.io/simevidas/pen/MKdmeV?editors=0110

【参考方案2】：

这种方式显示外部链接 ALA ***：

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

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

【讨论】：

因为原始问题询问如何排除具有特定域的网站。

上面的图标是蓝色，对于单色图标使用这样的：数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs + 9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNqEkIEJwCAMBGPpEs7hHK6hY + gauoZr6Bo6RtqEWkxb6EMQnuM / USEirIoxSmOKwDkhBEwp4VPkb4801Xun9xW4e + 9FldYarLUvkBPPOp4JGWOgtSaSt6VWQKUU9nPOEiSIgAmNMdadFTjn7utqrXwh6fLvH9nXhamW5ksMnpfDnw4BBgBfunO056MmqAAAAABJRU5ErkJggg == 跨度>

【参考方案3】：

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

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

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

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

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

【讨论】：

不明白为什么没有更多的支持。这是一个行之有效的优雅解决方案。

OP 正在寻找否定，因为 WP 在任何地方都使用完全限定的 URL，所以我的回答并没有真正解决他们的具体问题。尽管如此，这感觉像是放弃这个有用的代码 sn-p 的好地方，我喜欢将它与 a[rel=external] 结合使用。

【参考方案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');    

【讨论】：

只是好奇。图片中使用的是什么字体？

一开始我以为是PT Sans，但我相信是Open Sans -- google.com/fonts/specimen/Open+Sans

再想想字体，也可能来自这个：metroui.org.ua

嘿，你能给我入站链接的Css吗，拜托

【参考方案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"  ></rect> \
                    <rect fill="black" x="2" y="-24"  ></rect> \
                </mask> \
            </defs> \
            <g stroke="blue" fill="blue" stroke-> \
                <rect x="-20" y="-16"   rx="7" ry="7" stroke- fill="none" mask="url(%23corner)"/> \
                <g transform="translate(1,0)" stroke-linecap="square"> \
                    <line x1="0" y1="0" x2="17" y2="-17" stroke-/> \
                    <polygon points="21 -21, 21 -8, 8 -21" stroke-linejoin="round" stroke-/> \
                 </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”属性的链接。

【参考方案6】：

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

CSS：

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

【参考方案7】：

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

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

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

【参考方案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>');