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
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?