How to use a backslash in css content property?

Question

I'm trying to add a backslash after every list item, but I can't get it to work. It works if I use a pipe or a forward slash, but not a backslash. I searched for a character entity code to use, but I can't find one for a backslash. Is there a solution?

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

Thank you!

Answer 1

use double backslash

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

To know more about CSS escape sequences check this

use double backslash

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

<span></span>

\005C

Use \005C in content as @disinfor mentioned

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

<span></span>

Answer 2

Hey i want spend a full 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