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

html - Animation after toggling doesn't apply the second style

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


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?

Source link

Leave a reply

Please enter your comment!
Please enter your name here