时间戳

首页 > 解决方案 > 如何使用 CSS 通过显示他们的 favicon 来突出显示指向特定网站的链接？

css - 如何使用 CSS 通过显示他们的 favicon 来突出显示指向特定网站的链接？

问题描述

在我的网站上，我想example.com通过自动在他们网站的链接旁边显示他们的网站图标来突出我的附属链接，或者，如果不拉他们的特定网站图标，使用 FontAwesome 的书图标。我还想用不同的颜色设置这些链接的样式，并以最整洁的方式进行设置。我将如何在 CSS 中进行设置？

标签： cssfavicon

解决方案

您可以使用CSS 属性选择器example.com来定位它们，以将任何链接与其属性中的字符串匹配href：

a {
  display: inline-block;
  padding: 1em;
  border: 1px solid black;
  margin: 1em;
  text-decoration: none;
  color: black;
}

a[href*='example.com']:after {
  content: '';
  display: inline-block;
  margin-left: 0.5em;
  width: 1em;
  height: 1em;
  background: red;
}
<a href="#">Not an affiliated link</a>
<a href="https://example.com">Affiliated link</a>
<a href="http://www.example.com/foobar">Also affiliated link</a>

推荐阅读