Search code examples
htmlcsspseudo-elementpseudo-class

CSS: Method for scaling down inherited font size?

I'm trying to add content to the ::after pseudo-element for each hyperlink with target "_blank".

However, the various a elements each have different sizes, and I want the content in the ::after element to scale with that.

For example, if the a element has font-size: 10px;, I want the added content to have font-size: 8px; - a constant scale of 80% of the parent contents' size.

Without adding classes to each a element, is there a way in CSS to take the inherited font-size and scale it?

a[target=_blank]::after {
  content: " bar";
  font-size: 10px;
}
<a href="#">Foo</a>
<br>
<a href="#" target="_blank">Foo</a>

Solution

  • 0.8em = 80% of the current font-size:

    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>