CSS transition hover on parent effect on child - html

Question

I'm trying to animate inside button but for some reason it won't work. Width of the button should shrink to 0 to the left
HTML
<div class="siteBtnShare">
<div class="share-text-wrapper">
<span class="share-text">SHARE</span>
</div>
</div>
SCSS
.siteBtnShare {
position: relative;
display: inline-block;
font-family: 'Novecentosanswide-Medium';
width: 40px;
transition: width 1s;
overflow:hidden;
.share-text-wrapper{
width: 40px;
display: inline-block;
}
&:hover .share-text-wrapper{
width: 0;
}
}
EDIT: - Inside the button should shrink to 0, but it doesn't do anything. It remains visible

Answer 1

The width does shrink, you just don't see it because the text flows outside of the container:
.siteBtnShare {
position: relative;
display: inline-block;
font-family: 'Novecentosanswide-Medium';
width: 40px;
transition: width 1s;
overflow:hidden;
}
.share-text-wrapper{
width: 40px;
display: inline-block;
overflow: hidden;
}
.siteBtnShare:hover .share-text-wrapper{
width: 0;
}
<div class="siteBtnShare">
<div class="share-text-wrapper">
<span class="share-text">SHARE</span>
</div>
</div>
Working code in SCSS:
.siteBtnShare {
position: relative;
display: inline-block;
font-family: 'Novecentosanswide-Medium';
width: 40px;
transition: width 1s;
overflow:hidden;
.share-text-wrapper{
width: 40px;
display: inline-block;
overflow: hidden;
}
&:hover .share-text-wrapper{
width: 0;
}
}

Answer 2

Try this, without the FontAwesome icon or with, as per your preference.
SCSS
.siteBtnShare {
background: #eee;
display: inline-block;
padding: 10px;
height: 20px;
width: auto;
color: #333;
&:hover {
.share-text-wrapper {
.share-text {
width: 100%;
}
}
}
}
.label {
display: inline-block;
width: 1em;
color: #888;
}
.share-text-wrapper {
display: inline-block;
white-space: nowrap;
margin-left: -1em;
padding-left: 1em;
.share-text {
display: inline-block;
width: 0%;
overflow: hidden;
-webkit-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
}
}
HTML
<div class="siteBtnShare">
<span class="label"><i class="fa fa-share-alt" aria-hidden="true"></i></span>
<div class="share-text-wrapper">
<div class="share-text">
Share It Out
</div>
</div>
</div>
JSFiddle: https://jsfiddle.net/Jabideau/3bo4zxgc/