CSS：样式外部链接

Question

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

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

但Wordpress将整个网址放在链接中......那么，我怎样才能设置所有不以http://www.mywebsite.com开头的链接？

谢谢。

Answer 1

使用一些特殊的CSS语法，您可以轻松完成此操作。以下是一种适用于HTTP和HTTPS协议的方法：

a[href^="http://"]:not([href*="example.com"]):after,
a[href^="https://"]:not([href*="example.com"]):after{
    content: " (EXTERNAL)" 
}

您可以点击here。

查看此示例

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

我结合@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');    
}

Answer 4

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

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

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

归功于马克·巴蒂斯特拉（Mark Ba​​ttistella），left this snippet在2012年获得了CSS-Tricks。

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

Answer 5

这是如何使用收藏夹图标样式化外部链接的样式：

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

我们设置了要插入的图像的路径，指定了不重复，因此我们只插入了一个副本，然后将位置指定为文本内容右边的100％，0像素从顶部开始。

Answer 6

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

CSS：

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

Answer 7

伪元素在语法中具有'::'而不是'：'。

也只需要匹配以“ 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是脆的。 “矩形”是方框，带有“线”和“多边形”的组是箭头。所有数字都是整数，您可以根据需要进行调整。

然后在您的规则中，您可以像这样引用它：

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