I need to make a small circle background behind the letter "A". What CSS would make this effect?
See example:
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;
}
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.