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

Question

I have a CSS circle appearing after a div using the :after pseudo class. I need to insert an arrow inside of that circle, just like this. My problem is putting anything inside the circle. Since I already used :after to create the circle, how can I add something else inside of that?
I need the circle to be pure CSS, but the arrow can be an image.
Here is my code:
http://jsfiddle.net/s7crao4b/
<div id="callus-phone">
<div class="tagline">Call us today!</div>
<div class="phone-number">1 [phone]</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;
}

Answer 1

you can use Unicode character \25B6 in content
#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
}
<div id="callus-phone">
<div class="tagline">Call us today!</div>
<div class="phone-number">1 [phone]</div>
</div>

Answer 2

You can achieve the same result using only CSS with Font Awesome. It does not use the :after you are referring to, but again, its pure CSS, if you don't want to include the font awesome library, you could study their CSS and see how they do it, and go from there to implement your own icon with the :after
In my example, I added a bunch of positioning, and font sizing to try to center the arrow to the best of my abilities, but you can disregard that if you want.
I hope this is helpful.
#callus-phone {
color: white;
background: black;
padding: 25px 0px;
text-align: center;
}
.phone-number {
padding-bottom: 10px;
}
.fa-circle {
color: red;
}
.fa-caret-right {
color: white;
left: 2px !important;
top: -2px !important;
position: relative;
font-size: 40px !important;
}
.fa-stack {
font-size: 30px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div id="callus-phone">
<div class="tagline">Call us today!</div>
<div class="phone-number">1 [phone]</div>
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-caret-right fa-stack-1x fa-inverse"></i>
</span>
</div>
After seeing Vitorino Fernandes answer, I wanted to tell you that if you need to stick to the usage of the :after, but if you want a fancier character instead of an ugly character, you can use the code below. You dont need a reference to the Font Awesome CSS library, but you need to include the reference to their icons in your own CSS. (Or you can just include their CSS link tag in your HTML and forget about the #font-face that I added in your CSS).
#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: " \f095";
display: block;
height: 50px;
margin: auto;
width: 50px;
font: normal normal normal 14px/1 FontAwesome;
font-size:45px;
text-rendering: auto;
}
#font-face {
font-family: 'FontAwesome';
src: url('//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/fonts/fontawesome-webfont.eot?v=4.2.0');
src: url('//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
<div id="callus-phone">
<div class="tagline">Call us today!</div>
<div class="phone-number">1 [phone]</div>
</div>