span content without an extra element tag

Question

I am trying to creat plus and minus icons using spans for my accordians. I have managed to style up the span into a circle, however without putting a <p>+</p> inside the <span class="accordian-icon"></span> how can I put the '+' inside the span using the CSS content rule?

HTML

<div class="accordian-head">
   <h3><a href="#">Normal text</a></h3><span class="accordian-icon"></span>
</div>

CSS

.accordian-container .accordian-head span.accordian-icon{
  content:  "+";    
  display: block;
  width: 30px;
  height: 30px;
  float: right;
  background: white;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  margin:10px;
 }

Answer 1

How about this fiddle (as an example of how it may be done, there are a few approaches).

Importantly, the content property can only be used in conjunction with the :after or :before pseudo elements.

CSS

.accordian-icon{
    display:inline-block;
    position:relative;
    border:1px solid blue;
    border-radius:99px;
    background:blue;
    height:20px;
    width:20px;
    position:relative;
}
.accordian-icon:after{
    color:white;
    content:'+';
    position:relative;
    margin-left:5px;
}