1

I'm running into an issue with an HTML entity inside of :after content. It's working on most browsers and devices, but there seems to be a problem with certain android devices.

Here's the code I'm using:

.side-arrow::after{
    position:relative;
    content:"\025B8";
}
.down-arrow::after{
    position:relative;
    content:"\025BE";
}

Is this an issue with the HTML entity or with the CSS content? For some devices it doesn't show up at all and others it shows a blank box as if it's an image.

If there's a way to fix this without needing an image fallback, that would be ideal since there are a number of different colors and sizes needed.

EDIT

In the case of no support, what would be an alternative to adding the symbol to just those devices?

PBwebD
  • 778
  • 11
  • 33
  • What it has to do with android? – Apurva Mar 03 '15 at 15:10
  • Have you tried `:after` rather than `::after`? For some reason I think the latter has less support (not sure though). – Josh Crozier Mar 03 '15 at 15:10
  • @Apurva It has to to with android because it isn't happening on any apple devices, and perhaps it's an android bug. – PBwebD Mar 03 '15 at 15:13
  • @JoshCrozier It was my understanding that two colons was better than one? – PBwebD Mar 03 '15 at 15:13
  • 2
    [**CanIUse - Pseudo-Elements**](http://caniuse.com/#feat=css-gencontent) – Paulie_D Mar 03 '15 at 15:15
  • @testing123 According to [this question](http://stackoverflow.com/questions/10181729/should-i-use-single-or-double-colon-notation-for-pseudo-element-css) IE7/IE8 don't support the double colon notation.. so it's possible the same applies for older Andoids. Not sure though. According to Paulie_D's link above, it shouldn't matter, though. So I guess that's not the issue. – Josh Crozier Mar 03 '15 at 15:15
  • @Paulie_D Perfect, thank you. I've revised my question to ask for an alternative for browsers without the needed support. – PBwebD Mar 03 '15 at 15:18

0 Answers0