<div>My font size in px is: </div>


<a href="https://dev.to/janeori/css-type-casting-to-numeric-tanatan2-scalars-582j">read more here!</a>

@property --length {
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}

div { font-size: calc(1px + 2rem); }

div::after {
  --length: 1em;
  counter-reset: val calc(
    10000 * tan(atan2(var(--length), 10000px))
  );
  content: counter(val);
  /* safari bug filed, requires calc() wrapper, firefox bug requires 10k */
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.