I am playing around with the pseudo-class examples and am wondering if there is a way to exactly find out the proportions of a font so you could do something like
.box::before {
content: “”;
display: inline-block;
width: 0.78em;
height: calc(…);
margin-right: 3px;
margin-left: 3px;
background-color: rebeccapurple;
border: none;
}
xContent in the box in my HTML page.
What I want to achieve is that the box’s top is exactly the same (in pixel) as a basic uppercase letter like an F or a G (not an Ä or Á), and its height is exactly the same (in pixels) as the letter.
I guess it’s impossible because such information isn’t available from the font. (I made some fonts myself, and only some tools asked for this information, for internal purposes (i.e. showing grid lines.)