如何在字母周围画一个圆圈？

Question

I need to make a small circle background behind the letter "A". What CSS would make this effect?

See example:

Answer 1

With CSS? Something like this? http://jsfiddle.net/eLhqswyd/

<span class="i-circle">i</span>

.i-circle {
    background: #ff0000;
    color: #fff;
    padding: 5px 20px;
    border-radius: 50%;
    font-size: 35px;
}

Answer 2

Although this has been answered years ago, still:

To make a circle around the text you can use padding like the previous answer.

 span{ background: red; padding: .5rem.85rem; border-radius: 50%; }

 <span>i</span><span>m</span>

But as you can see, it won't circle all the letters (m) . To make any letter have a circle background, you can use fixed height and width. And then use flexbox/grid/absolute-position to center the text, like this:

 span{ width: 40px; height: 40px; display: inline-flex; /* you can also use 'grid' or just 'flex'*/ justify-content: center; align-items: center; background: red; border-radius: 50%; }

 <span>i</span><span>m</span><span>A</span>