CSS：外部链接样式

发布于 2024-10-24 17:44:32 字数 255 浏览 6 评论 0原文

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

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

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

谢谢。

原文

I want to style all external links in my website (Wordpress). I'm trying with:

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

But Wordpress put the entire url in the links... So, how could I style all links that doesn't start with http://www.mywebsite.com ?

Thank you.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

走野 2024-10-31 17:44:33

2021年解决方案

a[href]:not(:where(
  /* exclude hash only links */
  [href^="#"],
  /* exclude javascript only links */
  [href^="javascript:" i],  
  /* 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
<br>Lorem <a href="javascript:">javascript:</a> ipsum

2014 解决方案

使用一些特殊的 CSS 语法，您可以轻松地做到这一点。以下是一种适用于 HTTP 和 HTTPS 协议的方法：

a[href^="http://"]:not([href*="stackoverflow.com"]):after,
a[href^="https://"]:not([href*="stackoverflow.com"]):after {
  content: '↗️';
}

2021 Solution

a[href]:not(:where(
  /* exclude hash only links */
  [href^="#"],
  /* exclude javascript only links */
  [href^="javascript:" i],  
  /* 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
<br>Lorem <a href="javascript:">javascript:</a> ipsum

2014 Solution

Using some special CSS syntax you can easily do this. Here is one way that should work for both the HTTP and HTTPS protocols:

a[href^="http://"]:not([href*="stackoverflow.com"]):after,
a[href^="https://"]:not([href*="stackoverflow.com"]):after {
  content: '↗️';
}

回复收藏 0 原文

陌生 2024-10-31 17:44:33

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

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

可以在此处找到示例： http://jsfiddle.net/ZkbKp/

This way shows external links ALA Wikipedia:

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

An example can be found here: http://jsfiddle.net/ZkbKp/

回复收藏 0 原文

枕头说它不想醒 2024-10-31 17:44:33

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

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

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

感谢 Mark Battistella 留下了此代码段 2012 年的 CSS-Tricks。

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

One simple rule, no hardcoding involved:

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

Works for all schemes. Has the added benefit of identifing mistyped internal URLs. For cloaked internal links redirecting externally, simply prefix the relative URL with //.

Credit goes to Mark Battistella who left this snippet on CSS-Tricks in 2012.

Update: Based on actual use I've personally found the above problematic as it styles all absolute links which can lead to unexpected styling in some situations (e.g. In Brave, when you download a page for offline viewing). My suggestion is to use a[rel*="external"]::after instead and decorate your external links.

回复收藏 0 原文

匿名的好友 2024-10-31 17:44:33

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

I combined @superlogical + @Shaz to make something for my Foundation WP theme...

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

You can use this HTML snippet to test on your site:

<a href="http://gebfire.com" target="_blank">External</a>

This is a working example, look above to change the color to monochrome

This is what I used for a custom image (like a favicon)

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?

回复收藏 0 原文

千寻… 2024-10-31 17:44:33

假设您通过 Justin Bieber Fan Club 设置外部链接的目标
，你可以玩：

CSS：

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

Suppose you are setting the target for external links by <a href='http://' target='_blank'>Justin Bieber Fan Club</a>
, You can do play:

CSS:

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

回复收藏 0 原文

醉南桥 2024-10-31 17:44:33

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

还只需要匹配以“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，所以很清晰。 “矩形”是盒子，“线”和“多边形”的组是箭头。所有数字都是整数，您可以根据需要进行调整。

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

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”属性的链接。

Pseudo elements have a '::' instead of a ':' in the syntax.

There is also only a need to match a URL starting with 'http' rather than 'http://' or 'https://'.

Therefore I am not sure the accepted answer and other rated answers are technically correct.

To include a neat icon you can place an SVG in a CSS variable and then use it in your CSS rule.

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

That looks fiddly but it is a neat external link icon that can be edited to suit your theme without having to go back to a desktop publishing application. Because the icon is part of the stylesheet you don't have to have the browser do an extra download for it. Also because it is SVG is is crisp. The 'rect' is the box, the group with the 'line' and 'polygon' is the arrow. All the numbers are integers and you can adjust them if you want to.

Then in your rule you can reference it like so:

a[href^="http"]:not([href*="example.mil"])::after {
    content: '';
    background: no-repeat left .25em center var(--icon-external-link);
    padding-right: 1.5em;
}

The matched links are the ones that start with http and don't include your domain name. Both 'http://' and 'https://' start with 'http' so there is no need to duplicate the rule as per the accepted answer.

If you are using protocol less links in your content that start with '//' then this will need to be taken into account.

You may also want to be strict about how you open external links. For instance you might want to always have external links open in a new tab with the target blank approach. To do this properly you need to include target="_blank" as well as rel="noopener noreferrer" in your links. Therefore, to spot where this is not present in your markup you might want to target only the links that have the correct 'rel' attributes.

回复收藏 0 原文

鯉魚旗 2024-10-31 17:44:33

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

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

我们设置要插入的图像的路径，指定不重复，这样我们只插入一个副本，然后将位置指定为 100% 的位置文本内容的右侧，距顶部 0 像素。

This is how you can style external links with a favicon image:

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

We set the path to the image we want to insert, specify no-repeat so we only get one copy inserted, and then specify the position as 100% of the way over to the right of the text content, and 0 pixels from the top.

回复收藏 0 原文

∞梦里开花 2024-10-31 17:44:33

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

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

I like the approach @henryscat shared, but not being an SVG expert I struggled to change the icon. To make it easier for me, I removed the mask and created the icon using lines only. The comment in front of the icon definition describes which <line/> is which part of the icon.

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

回复收藏 0 原文

~没有更多了~