Question

我设法用一个小地球装饰我网站外的所有链接，如下所示：

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 :-( */
}

但是：我可以让它没有文字装饰（它是从第1行点缀的边框底部1px）？

Answer 1

您使用a设置border-bottom的样式，但是您尝试使用pseudo-element ::after覆盖它，这实际上是具有自己样式的不同元素。您应该在没有border-bottom的情况下覆盖::after。

此外，您不需要!important，因为a:not()的{{3}}不是a。

＆＃13;

a {
  border-bottom: 5px dotted silver;
}
a:not([href^="http://davidbraun.ch"]) {
  border-bottom: none;
}

＆＃13;

<a href="http://davidbraun.ch">http://davidbraun.ch</a>
<a href="http://stackoverflow.com">http://stackoverflow.com</a>

＆＃13;

Answer 2

注意边框不是文字装饰。文本修饰使用text-decoration属性：

完成

a {
    text-decoration: underline; /* CSS 2.1 fallback */
    text-decoration: underline dotted silver; /* CSS3 */
}

此属性通常会影响所有后代，即使它们具有text-decoration: none。

但display: inline-block可以避免这种情况，如this answer中所述。

a:not([href^="http://davidbraun.ch"]):after {
    display: inline-block;
}

a {
  text-decoration: underline;
  text-decoration: underline dotted silver;
}
a:not([href^="http://davidbraun.ch"]):after {
  content: ' O';
  font: 75%'PantonIcons-BRegular';
  vertical-align: super;
  color: #0b1b3c;
  display: inline-block;
}

<a href="http://davidbraun.ch">http://davidbraun.ch</a>
<a href="http://stackoverflow.com">http://stackoverflow.com</a>

Answer 3

防止text-decoration影响后代并非易事。但是，由于您使用的是边框而不是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

css避免border-bottom on：after

3 个答案: