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

您可以使用em而不是px。 em个元素与其容器相关。 font-size: 1em;表示其父亲font-size的字体大小为100％。如果您的父元素的font-size为16px而您给其中一个孩子font-size 1em，则字体大小将计算为{{ 1}}（16px =父级字体大小的100％）取决于其父级的字体大小。

这是一个演示：

＆＃13;

1em

＆＃13;

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

＆＃13;

Answer 2

0.8em =当前font-size的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>

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

2 个答案: