Image after text using absolute position in :before class - html

Question

I have a button which has a static and hover state.
Now there is a small down arrow image which sits after text using :before class. I had to use :before instead :after as there is a hover effect. Due to hover effect the :after class was not displaying the small arrow image so I had to use :before and absolute positioning to position that image after text.
The problem is that the text length can vary and as it is absolute position so sometimes the image sits inside the text not after the text.
Here is the code
<button type="submit" class="button uppercase btn-1b">home</button>
<br>
<br>
<button type="submit" class="button uppercase btn-1b">development</button>
Demo: Example of short and long text with image(small down arrow)
Any help is highly appreciated. Thanks in advance.

Answer 1

interchanged with :before :after
remove position: absolute; for arrow
.uppercase {
text-transform: uppercase;
}
.button {
color: white;
position: relative;
z-index: 1;
background: #000;
border: 1px solid #9d9368;
font-size: 17px;
padding: 0.5rem 2rem;
width: 220px;
display: inline-block;
cursor:pointer;
}
.button:after {
background-image: url("http://s12.postimg.org/63ise2fkp/button_arrow.png?noCache=1431762044");
background-repeat: no-repeat;
content:"";
height: 5px;
width: 8px;
margin-left: 5px;
display: inline-block;
vertical-align: middle;
}
.button:before {
content:"";
position: absolute;
top: 1.1rem;
right: 4.1rem;
transition: all 0.3s ease 0s;
z-index: -1;
}
.btn-1b:before {
width: 100%;
height: 0;
top: 0;
left: 0;
background: #b0a479;
}
.btn-1b:hover, .btn-1b:active {
color: #000000;
}
.btn-1b:hover:before, .btn-1b:active:before {
height: 100%;
}
.button:hover:after {
background-image: url("http://s8.postimg.org/419zt4xk1/button_arrow_hover.png?noCache=1431844698");
}
<button type="submit" class="button uppercase btn-1b">home</button>
<br>
<br>
<button type="submit" class="button uppercase btn-1b">development</button>

Answer 2

I'd suggest taking advantage of the fact that the <button> element can contain child elements, and wrapping the text with a <span>, then using the - more appropriate ::after pseudo-element:
<button type="submit" class="button uppercase btn-1b"><span>home</span>
</button>
<br>
<br>
<button type="submit" class="button uppercase btn-1b"><span>development</span>
</button>
And using the following CSS for the un-hovered and hovered states:
.button span:after {
background-image: url("http://s12.postimg.org/63ise2fkp/button_arrow.png?noCache=1431762044");
background-repeat: no-repeat;
content:"";
display: inline-block;
height: 5px;
width: 8px;
margin-left: 0.5em;
}
.button:hover span:after {
background-image: url("http://s8.postimg.org/419zt4xk1/button_arrow_hover.png?noCache=1431844698");
}
.button span:after {
background-image: url("http://s12.postimg.org/63ise2fkp/button_arrow.png?noCache=1431762044");
background-repeat: no-repeat;
content: "";
display: inline-block;
height: 5px;
width: 8px;
margin-left: 0.5em;
}
.button:after {
content: "";
position: absolute;
top: 1.1rem;
right: 4.1rem;
transition: all 0.3s ease 0s;
z-index: -1;
}
.uppercase {
text-transform: uppercase;
}
.button {
color: white;
position: relative;
z-index: 1;
background: #000;
border: 1px solid #9d9368;
font-size: 17px;
padding: 0.5rem 2rem;
width: 220px;
display: inline-block;
cursor: pointer;
}
.btn-1b:after {
width: 100%;
height: 0;
top: 0;
left: 0;
background: #b0a479;
}
.btn-1b:hover,
.btn-1b:active {
color: #000000;
}
.btn-1b:hover:after,
.btn-1b:active:after {
height: 100%;
}
.button:hover span:after {
background-image: url("http://s8.postimg.org/419zt4xk1/button_arrow_hover.png?noCache=1431844698");
}
<button type="submit" class="button uppercase btn-1b"><span>home</span>
</button>
<br>
<br>
<button type="submit" class="button uppercase btn-1b"><span>development</span>
</button>
JS Fiddle demo.