CSS：缩小继承字体大小的方法？答案

【问题标题】：CSS: Method for scaling down inherited font size?CSS：缩小继承字体大小的方法？
【发布时间】：2015-07-29 08:38:34
【问题描述】：

我正在尝试为每个目标为“_blank”的超链接的::after 伪元素添加内容。

但是，各种a 元素都有不同的大小，我希望::after 元素中的内容能够随之缩放。

例如，如果a 元素具有font-size: 10px;，我希望添加的内容具有font-size: 8px; - 恒定比例为父内容大小的 80%。

如果不向每个a 元素添加类，CSS 中有没有办法采用继承的字体大小并对其进行缩放？

a[target=_blank]::after {
  content: " bar";
  font-size: 10px;
}

<a href="#">Foo</a>
<br>
<a href="#" target="_blank">Foo</a>

【问题讨论】：

您已经讨论过使用百分比的相对大小，您尝试过吗？因为这解决了你的问题。
@AndersRehn 它似乎不起作用 - after 的 80% 内容比元素内容大得多。

标签： html css pseudo-element pseudo-class

【解决方案1】：

您可以使用em 而不是px。 em 元素相对于它们的容器。 font-size: 1em; 表示其父级 font-size 的 100% 字体大小。如果您的父元素具有16px 的font-size 并且您为其中一个子元素提供1em 的font-size，则字体大小将计算为16px（1em = 100% 的父字体大小) 取决于其父级的字体大小。

这是一个演示：

a {
  font-size: 20px; 
}
a[target="_blank"]::after {
  content: ' bar';
  font-size: 0.8em; /*80% of it's parent*/
}

<a href="#">Foo</a>
<br>
<a href="#" target="_blank">Foo</a>

【讨论】：

【解决方案2】：

0.8em = 当前字体大小的 80%：

a[target="_blank"] {
     font-size: 25px;
}
a[target=_blank]::after {
  content: " bar";
  font-size: 0.8em;
}

<a href="#">Foo</a>
<br>
<a href="#" target="_blank">Foo</a>

【讨论】：

谢谢你，完美，我会尽快接受这个答案。
或者直接使用font-size: 80%。