html - I have a div with a pseudo :after element creating a circle after it. How can I add something else inside that circle? -

html - I have a div with a pseudo :after element creating a circle after it. How can I add something else inside that circle? -

i have css circle appearing after div using :after pseudo class. need insert arrow within of circle, just this. problem putting within circle. since used :after create circle, how can add together else within of that?

i need circle pure css, arrow can image.

here code: http://jsfiddle.net/s7crao4b/

<div id="callus-phone"> <div class="tagline">call today!</div> <div class="phone-number">1 (800) 555-5555</div> </div> #callus-phone { color: white; background: black; padding: 25px 0px; text-align: center; } .phone-number { padding-bottom: 10px; } #callus-phone:after { background: red; border-radius: 50px; content: ""; display: block; height: 50px; margin: auto; width: 50px; }

you can utilize unicode character \25b6 in content

class="snippet-code-css lang-css prettyprint-override">#callus-phone { color: white; background: black; padding: 25px 0px; text-align: center; } .phone-number { padding-bottom: 10px; } #callus-phone:after { background: red; border-radius: 50px; content: "\25b6"; display: block; line-height: 50px; height: 50px; margin: auto; width: 50px; font-size: 22px } class="snippet-code-html lang-html prettyprint-override"><div id="callus-phone"> <div class="tagline">call today!</div> <div class="phone-number">1 (800) 555-5555</div> </div>

html css