Why am I printing » instead of »?

I want to just show this: », but » is showing instead. Why is Â being added to it? How come it's not just the double right arrow? What's wrong with my code?

CSS

#buttonServices1{transition: all 0.5s;}


#buttonServices1 span {
transition:0.5s;
}

#buttonServices1 span:after {
content: '»';
transition: 0.5s;
}

#buttonServices1:hover span {
padding-right: 25px;
}

#buttonServices1:hover span:after {
opacity: 1;
}

HTML:

<button id="buttonServices1"><span>Services</span></button>

Picture: