CSS: How to fix the excess space of symbols like this (when line-height doesn't cut it)-CodePudding

Some special symbols such as ࿊ (࿊) have a weird spacing, resulting in a styling problem such as this:

https://jsfiddle.net/MirandaN/t9hkv13L/28/

p {
  line-height: 1.4;
}
a::before {
  content: '࿊';
  /* display: inline-block; -- this would remove the background-color without reducing the actual clickable area*/
  background-color: red;
  position: relative;
  top: -.1em;            /* to align the symbol vertically with the rest of the line */
  color: white;
  border-radius: 30px;
  font-size: 1.8em;
  line-height: 0;        /* to make <a> obey <p>'s line-height */
}

<body style="font-size: 48px">
  <p>
    Ouch, you mad bro?<br>
    <a href=""></a> Why so damn tall?<br>
    Please get short!
  </p>
</body>

The symbol is inserted as a ::before pseudo-element of <a>, originally without a background color. The symbol appeared lower than the rest of its line, so I subtracted its relative top value a little for vertical alignment (after I tried margin-top and padding-top that didn't fix it).

And its line-height appeared larger than what had been set for <p>, so I set this symbol's line-height to 0 (after I tried 1 that didn't fix it). Then I noticed that <a>'s clickable area was extending out and into the above line, such that each such portion of the above line could become troublingly clickable. I colored <a>'s background to see that its area was really spilling out of its line upward.

I read some suggestion to add display: inline-block to such a pseudo-element; in my case, it would remove the element's background color without fixing the excess clickable area.

Can this be solved so that the clickable area of <a> with this symbol fits within its line? Or is this extra spacing an inexorable part of the character?

CodePudding user response：

The height of a glyph is set by the font. Non-Latin glyphs like the one you've chosen may have very different sizes to the usual letter glyphs. In this case, it's exaggerated because you've set font-size: 1.8em, which makes the glyph almost twice as tall as the rest of the line!

The best solution to your problem here may be to use an SVG icon (or PNG if you prefer) as the background image, because you can size this precisely using width and height properties, and the SVG will be the same size as its bounding box, which isn't the case for font glyphs, as you see here.

CodePudding user response：

The right way is to set the ackground on your a not your before element.

a{
  background-color: red;
  border-radius: 30px;
}

As you are having a position: relative the line height will be taken on the a height, the background will respect now the normal way.

DEMO

p {
  line-height: 1.4;
  
}
a{
  background-color: red;
  border-radius: 30px;
}
a::before {
  content: '࿊';
  /* display: inline-block; -- this would remove the background-color without reducing the actual clickable area*/
  position: relative;
  top: -.1em;            /* to align the symbol vertically with the rest of the line */
  color: white;
  font-size: 1.8em;
  line-height: 0;        /* to make <a> obey <p>'s line-height */
}

<body style="font-size: 48px">
  <p>
    Ouch, you mad bro?<br>
    <a href=""></a> Why so damn tall?<br>
    Please get short!
  </p>
</body>