Span position inside anchor tag - html

Question

I have a spaninside the anchorelement.
All I want is:
1) Have a width for the anchor text, so that it does not overlap on the span element.
2) The span element should be aligned to the first line of the anchor text
3) The span element to be right of the anchor text
a {
width: 147px;
display: inline-block!important;
}
span.expand {
background: url(https://cdn2.iconfinder.com/data/icons/deadsimple/youtube.gif) no-repeat right center;
text-decoration: none !important;
padding-right: 14px;
margin-left: 100px;
}
<a href="#">
Enrollment to communication skills
<span class="expand"></span>
</a>
I have no other choice but to use span inside anchor, even though it is not a recommended.

Answer 1

Not sure what you want to achieve, but based on what you have mentioned, here is the solution.
WORKING DEMO
The CSS Change:
a {
width: auto;
display: inline-block!important;
}
span.expand {
background: url(https://cdn2.iconfinder.com/data/icons/deadsimple/youtube.gif) no-repeat right center;
text-decoration: none !important;
background-position: top right;
padding: 11px;
float: right;
}
Edited CSS Change:
If the width needs to exist without setting it to auto, below is the code.
WORKING DEMO WITHOUT AUTO WIDTH
a {
width: 135px;
display: inline-block;
position: relative;
}
span.expand {
background: url(https://cdn2.iconfinder.com/data/icons/deadsimple/youtube.gif) no-repeat right center;
text-decoration: none !important;
background-position: 0 0px;
padding: 11px;
position: absolute;
z-index: 1;
top: 1px;
right: 17px;
}
Hope this helps.

Answer 2

You can do this in a few ways. One way is by moving the <span> outside the anchor. Another way is by adding the background image to the anchor and remove the span.
Both ways are visible in this JSFiddle: https://jsfiddle.net/xpoa06x8/
<a href="#">
<!-- using a backgroundimage -->
Enrollment to communication skills
</a>
<br/><br/><br/><br/><br/>
<a class="href" href="#">
<!-- using an extra span -->
Enrollment to communication skills
</a>
<span class="extend"></span>
CSS:
a {
width: 146px;
display: inline-block!important;
background-image: url(https://cdn2.iconfinder.com/data/icons/deadsimple/youtube.gif);
background-repeat: no-repeat;
background-position: 120px 0px;
}
/* Second example */
.href{
background-image: none;
float:left;
display:block !important;
}
.extend{
display:block;
float:left;
background-image: url(https://cdn2.iconfinder.com/data/icons/deadsimple/youtube.gif);
background-repeat: no-repeat;
width:15px;
height:15px;
}

Answer 3

Working fiddle
I added :after pseudo-element instead .extend with position:absolute;
a {
width: 147px;
display: inline-block!important;
position:relative
}
a:after {
background: url(https://cdn2.iconfinder.com/data/icons/deadsimple/youtube.gif) no-repeat right center;
text-decoration: none !important;
width: 15px;
height: 15px;
vertical-align: baseline;
display: block;
margin-left: 5px;
content: '';
position: absolute;
right: -10px;
top: 0;
}