I'm trying to create a question-mark-inside-a-circle glyph using CSS. It should look like © basically.
a::before { content: '?'; font-size: 60%; font-family: sans-serif; vertical-align: middle; font-weight: bold; text-align: center; display: inline-block; width: 1.8ex; height: 1.8ex; border-radius: 1ex; color: blue; background: white; border: thin solid blue;}.infolink:hover::before { color: white; background: blue; border-color: white;}<a class="infolink" href="#">a link</a>It's not bad on Firefox but the positioning of the question mark inside the circle is off-centre on Chrome (and I don't have IE to test but I'm assuming the worst).
I don't understand much about the nuances of fonts. Can this approach be made to work cross-platform or should I give up and use an image? I'm doing it this way to keep it scaled with the font.
Tweaking the settings as suggested so far is providing improvements only in select circumstances. There always seems to be some font sizes for which there is more than a rounding error (more than 1 pixel that is) of off-centreness either horizontally or vertically. The goal is to fit the border to the question mark, not fit the border to the square box which contains the question mark, as I suspect is happening.