I'm attempting to use CSS to create a glyph of a question mark inside a circle, similar to the copyright symbol ©.
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>While it looks acceptable on Firefox, the positioning of the question mark within the circle is slightly off-center on Chrome (and I cannot test in Internet Explorer). Is there a way to make this approach work consistently across different platforms or should I resort to using an image? I prefer this method as it keeps the glyph scaled with the font size.
Adjusting the settings as suggested has only provided slight improvements in certain cases. There always seems to be a discrepancy in alignment for certain font sizes, both horizontally and vertically. The objective is to have the border fit snugly around the question mark, not around the square box containing it, which may be causing the issue.