我设法用一个小地球装饰了我网站外部的所有链接，如下所示：
a {border-bottom: 1px dotted silver;}
a:not([href^="http://davidbraun.ch"]):after{
content: ' O';
font: 75% 'PantonIcons-BRegular';
vertical-align: super;
color:#0b1b3c;
border-bottom: none !important; /* doesn't work :-( */
}
但是：我可以让它没有文本修饰吗（它是从第一行开始的底边框1px）？
防止text-decoration影响后代并非易事。但是，由于您使用borders而不是text-decoration，因此更加困难。但是还是有可能的。
如果您的a元素是内联的（默认情况下是内联的），则可以使用float: right：
a {
text-decoration: none;
border-bottom: 1px dotted silver;
}
a:not([href^="http://davidbraun.ch"]):after {
content: ' O';
font: 75%'PantonIcons-BRegular';
vertical-align: super;
color: #0b1b3c;
float: right;
}Foo
<a href="http://example.com">http://stackoverflow.com</a>
Bar但这将::after太过分了。因此，您将需要一个内联块包装器：
.link {
display: inline-block;
}
a {
text-decoration: none;
border-bottom: 1px dotted silver;
}
a:not([href^="http://davidbraun.ch"]):after {
content: ' O';
font: 75%'PantonIcons-BRegular';
vertical-align: super;
color: #0b1b3c;
float: right;
}Foo
<span class="link">
<a href="http://example.com">http://stackoverflow.com</a>
</span>
Bar还有一种position: absolute方法：
a {
text-decoration: none;
border-bottom: 1px dotted silver;
}
a:not([href^="http://davidbraun.ch"]):after {
content: ' O';
font: 75%'PantonIcons-BRegular';
vertical-align: super;
color: #0b1b3c;
position: absolute;
}Foo
<a href="http://example.com">http://stackoverflow.com</a>
Bar但是，现在::after会重复以下内容，所以你应该补充一些margin-right到a：
a {
text-decoration: none;
border-bottom: 1px dotted silver;
margin-right: .5em;
}
a:not([href^="http://davidbraun.ch"]):after {
content: ' O';
font: 75%'PantonIcons-BRegular';
vertical-align: super;
color: #0b1b3c;
position: absolute;
}Foo
<a href="http://example.com">http://stackoverflow.com</a>
Bar本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句