CSS: 缩小继承字体大小的方法？

Question

我正在尝试为每个目标为“_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>

Answer 1

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>

Answer 2

您可以使用 em 而不是 px。 em 元素是相对于它们的容器的。 font-size: 1em; 表示其父 font-size 字体大小的 100%。如果您的父元素的 font-size 为 16px，并且您为它的其中一个子元素提供了 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>

CSS: 缩小继承字体大小的方法？

CSS: Method for scaling down inherited font size?

html

css

pseudo-class

pseudo-element