fungusanthrax fungusanthrax - 5 months ago 12
CSS Question

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:

SEE

Answer

The CSS content property requires you to use Unicode hex escapes

content: '\00bb',

Here is a useful chart of them https://css-tricks.com/snippets/html/glyphs/

Comments