Geek Answers Handbook

Trying to create a consistent one? -mark-inside-circle in CSS

I am trying to create a token inside inside a circle using CSS. It should look like & copy; mostly.

Here is what I still have .

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; }

This is not bad for firefox, but the location of the question mark inside the circle is off-center in Chrome (and I don't have IE for testing, but I assume the worst).

I do not really understand the nuances of fonts. Is it possible to make such an approach for working on a cross-platform platform, or should I refuse to use an image? I do this to save it with a font.

UPDATE: customizing the settings proposed so far provides only improvements in certain circumstances. It seems that there are some font sizes for which there is more than a rounded error (more than 1 pixel) of off-centerness, either horizontally or vertically. The goal is to attach a border to the question mark, and not match the border of the square box containing the question mark, as I suspect is happening.

+7
html css
source share
3 answers

See this script: http://jsfiddle.net/hg7nP/7/

Highlighting only those things that I changed:

 .infolink:before { font-size: 1.4ex; line-height: 1.8ex; border-radius: 1.2ex; margin-right: 4px; padding: 1px; text-decoration: none; }

As for the cross browser, it works in all browsers except IE <9 where border-radius will not work.

+5
source share

Just make the line height the same as the height of the element / pseudo element.

 line-height:1.8ex;
+1
source share

It looks like you are missing line-height:1; Add this and it gets much better.

Personally, I think it looks best with font-size:50% , but this is my opinion.

Updated script

+1
source share

More articles:


All Articles