Put span on top of div

Question

I built some social buttons with counters. And I want the counter data to show on top of my buttons. Somehow they are always inside the buttons.

1. Is it possible to put the number of shares on top of the button, how?

2. Each social button has text inside, even though I put float: left and text-align: left,
   the text still shows in the center, why?

Please see my fiddle... Fiddle

My HTML:

<a class="post-share facebook entShare" target="entsharewindow" href="#">
<div class="social-buttons-text">Facebook Like</div><span>0</span>
</a> 
<a class="post-share facebook entShare" target="entsharewindow" href="#">
<div class="social-buttons-text">Facebook Share</div><span>0</span>
</a> 
<a class="post-share twitter entShare" target="entsharewindow" href="#">
<div class="social-buttons-text">Twitter</div><span>0</span>
</a> 

My CSS:

 a.post-share {
    display: block;
    width: 74px;
    height: 34px;
    float: left;
    margin: 10px 0px 0px 0px;
    background: #3e599a url(sidebar-share.png) no-repeat 0 0;
    text-decoration:none;
    width: 110px;
    text-indent: 50px;
    font: 15px/46px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    color: #FFFFFF;
}
a.post-share:hover {
    opacity: 0.8;
    text-decoration: none;
    cursor: pointer;
}

a.post-share span {
    width: 22px;
    height: 18px;
    padding: 3px;
    display: block;
    float:right;
    background-color:#080563;
    color: #FFFFFF;
    font-style:bold;
    vertical-align: middle;
    font: 10px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    text-align:center;
    text-indent: 0;
}

a.post-share.facebook {
background-color: #3B5998;
background-image: url('/images/social-icons/facebook-32.png');
margin-right: 10px;
}

a.post-share.facebook {
background-color: #3B5998;
background-image: url('/images/social-icons/facebook-32.png');
margin-right: 10px;
}


a.post-share.googleplus {
background-color: #D14836;
background-image: url('/images/social-icons/googleplus-32.png');
margin-right: 10px;
}

.social-buttons-text {
    font-size:4px;
    color:#FFFFFF;
    float:left;
    margin:0px;
    padding:0px;
    text-align:left;
}   

Answer 1

• you can set a tag position:relative and the span inside it position:absolute and give top and left to align it in position

a.post-share {
  display: block;
  width: 74px;
  height: 34px;
  float: left;
  margin: 40px 0px 0px 0px;
  background: #3e599a url(sidebar-share.png) no-repeat 0 0;
  text-decoration: none;
  width: 110px;
  font: 15px/46px"Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  color: #FFFFFF;
  position: relative;
}
a.post-share:hover {
  opacity: 0.8;
  text-decoration: none;
  cursor: pointer;
}
a.post-share span {
  width: 22px;
  height: 18px;
  padding: 3px;
  display: block;
  position: absolute;
  top: -24px;
  right: 0;
  background-color: #080563;
  color: #FFFFFF;
  font-weight: bold;
  vertical-align: middle;
  font: 10px"Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  text-align: center;
  text-indent: 0;
}
a.post-share.facebook {
  background-color: #3B5998;
  background-image: url('/images/social-icons/facebook-32.png');
  margin-right: 10px;
}
a.post-share.facebook {
  background-color: #3B5998;
  background-image: url('/images/social-icons/facebook-32.png');
  margin-right: 10px;
}
a.post-share.googleplus {
  background-color: #D14836;
  background-image: url('/images/social-icons/googleplus-32.png');
  margin-right: 10px;
}
.social-buttons-text {
  font-size: 4px;
  color: #FFFFFF;
  float: left;
  margin: 0px;
  padding: 0px;
  text-align: left;
}

<a class="post-share facebook entShare" target="entsharewindow" href="#">
  <div class="social-buttons-text">Facebook Like</div><span>0</span>
</a>
<a class="post-share facebook entShare" target="entsharewindow" href="#">
  <div class="social-buttons-text">Facebook Share</div><span>0</span>
</a>
<a class="post-share twitter entShare" target="entsharewindow" href="#">
  <div class="social-buttons-text">Twitter</div><span>0</span>
</a>