CSS weirdness with width transition - html

Question

Made a web portfolio. Around my name there is contact data. Initial width of text is 0, when hovering the icons expand with the "transition" property. Icons on the left work fine, but those on the right have a weird transition, especially the phone.
http://jsfiddle.net/4y9eW/
<div class="contactbox left">
<a href="https://twitter.com/D4NiMG" class="contactchild" id="contacttwittertext">
<span class="contacticon-twitter"></span>
<span class="contacttext">#D4NiMG</span>
</a>
<a href="https://plus.google.com/+DaniMu%C3%B1ozGuardiola" class="contactchild" id="contactgoogleplustext">
<span class="contacticon-google-plus"></span>
<span class="contacttext">+DaniMuñozGuardiola</span>
</a>
</div>
<span id="titlespan">Dani Guardiola</span>
<div class="contactbox right">
<a href="mailto:d4nimg#gmail.com" class="contactchild" id="contactemailtext">
<span class="contacticon-email"></span>
<span class="contacttext">d4nimg#gmail.com</span>
</a>
<a href="tel:[phone]" class="contactchild" id="contactphonetext">
<span class="contacticon-phone"></span>
<span class="contacttext">[phone]</span>
</a>
</div>
CSS:
.contacttext {
display: none;
white-space: nowrap;
}
.contactchild:hover .contacttext {
display: inline-block;
}
.contactchild {
position: relative;
display: inline-block;
overflow: hidden;
width: 32px;
color: white;
transition: width 0.3s;
}
#contacttwittertext:hover {
transition: width 0.3s;
width: 107px;
color: #00aced;
}
#contactgoogleplustext:hover {
transition: width 0.3s;
width: 189px;
color: #D34836;
}
#contactemailtext:hover {
transition: width 0.3s;
width: 175px;
color: #8036d3;
}
#contactphonetext:hover {
transition: width 0.3s;
width: 154px;
color: #6fd336;
}

Answer 1

The problem with the phone is that the text wraps. Set
.contactchild { white-space: nowrap }
The weird overlap is caused by your misuse of position: absolute. Get rid of that. Move it around with margins, the parent forcing nowrap.
The weird underscores has to do with the spaces in the HTML. See 1 vs 2. It's <a>'s underline (note the spaces).