How to use backslash in CSS content properties?

Question

I am trying to add a backslash after each element of a list, but I cannot get it to work. It works if I use a channel or a slash, but not a backslash. I was looking for character entity code to use, but I cannot find it for the backslash. Is there a solution?

#navigation ul.nav > li:after{ content: " \ "; } 

Thanks!

Answer 1

use double backslash

 #navigation ul.nav > li:after{ content: '\\'; } 

To learn more about CSS escape sequences, check out this.

use double backslash

  span:after{ content: '\\'; } 

 <span></span> 

\005C

Use \005C in the content as @disinfor mentioned

  span:after{ content: '\005C'; } 

 <span></span> 

Answer 2

Hi, I want to give a complete example.

  $dsp-md-imprint: "e900"; @function unicode($str){ @return unquote("\"")+unquote(str-insert($str, "\\", 1))+unquote("\"") } @mixin makeIcon($arg, $val , $os: null) { // @debug $os; // @debug $arg; // @debug $val; @if($os) { .ion-#{$arg}:before, .ion-#{$os}-#{$arg}:before , .ion-#{$os}-#{$arg}-outline:before { content: unicode($val); } } @else { .ion-#{$arg}:before, .ion-#{$arg}-outline:before, .ion-md-#{$arg}:before, .ion-md-#{$arg}-outline:before, .ion-ios-#{$arg}:before, .ion-ios-#{$arg}-outline:before { content: unicode($val); } } } @include makeIcon(dsp-imprint, $dsp-md-imprint, md); 

and can be tested here