CSS Error in browser: 'Unknown property name' when using pseudo :after
<p>I am getting the following error in Chrome and Explorer when trying to set css property of a pseudo <code>:after</code>. <em>(I'm trying to set a burger nav icon and style it)</em></p>

<p><strong>I am getting the error:</strong> </p>

<blockquote>
  <p>'Unknown property name'</p>
</blockquote>

<p><strong>when I set the <code>width</code>, <code>height</code>, <code>background</code> etc. of  pseudo <code>:after</code>. Here it is in Chrome:</strong></p>

<p><a href="https://i.stack.imgur.com/vQaea.png" rel="noreferrer"><img src="https://i.stack.imgur.com/vQaea.png" alt="enter image description here"></a></p>

<p><strong>The code that is giving me the error:</strong></p>

<pre><code>nav a#pull:after {
 content:"";
 background: url('nav-icon.png') no-repeat;
 width: 30px;
 height: 30px;
 display: inline-block;
 position: absolute;
 right: 15px;
 top: 10px;
</code></pre>

<p><strong>Full HTML Code</strong></p>

<pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Delivery Motion!&lt;/title&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&gt;
    &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
    &lt;script src="js/jquery-3.0.0.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;

    window.onload = function() {
    if (window.jQuery) {
        // jQuery is loaded
        alert("Yeah!");
    } else {
        // jQuery is not loaded
        alert("Doesn't Work");
    }
}
    // Grab the pull (extra menu icon) div and when clicked event handler will bring menu (the old actual menu).
    $(function() {
      var pull        = $('#pull');
      menu        = $('nav ul');
      menuHeight  = menu.height();

      $(pull).on('click', function(e) {
        e.preventDefault();
        menu.slideToggle();
      });
    });
// if the window is resized greater than 320px remove the display none attribute from the menu (actual older menu).
    $(window).resize(function(){
      var w = $(window).width();
      if(w &gt; 320 &amp;&amp; menu.is(':hidden')) {
          menu.removeAttr('style');
        }
    });
    &lt;/script&gt;


   &lt;/head&gt;
   &lt;body&gt;
     &lt;nav class="clearfix"&gt;
       &lt;ul class="clearfix"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;How-to&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Icons&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Design&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Web 2.0&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Tools&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;a href="#" id="pull"&gt;Menu&lt;/a&gt;
      &lt;/nav&gt;
   &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p><strong>Full CSS Code</strong></p>

<pre><code>* {
  margin: 0%;
}
body {
    background-color: #ece8e5;
}

nav {
    height: 40px;
    width: 100%;
    background: #455868;
    font-size: 11pt;
    font-family: 'PT Sans', Arial, sans-serif;
    font-weight: bold;
    position: relative;
    border-bottom: 2px solid #283744;
}

nav ul {
    padding: 0;
    margin: 0 auto;
    width: 600px;
    height: 40px;
    border: 2px solid;
}
nav li {
    display: inline;
    float: left;
}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
nav a {
    color: #fff;
    display: inline-block;
    width: 100px;
    text-align: center;
    text-decoration: none;
    line-height: 40px;
    text-shadow: 1px 1px 0px #283744;
}
nav li a {
    border-right: 1px solid #576979;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
nav li:last-child a {
    border-right: 0;
}

/*the menu will have brighter color when it is in :hover or :active state*/
nav a:hover, nav a:active {
    background-color: #8c99a4;
}
/*extra link will be hidden (for the desktop screen)*/
nav a#pull {
    display: none;
}

/*When the screen size is max 600px the nav ul width will be 50%*/
@media screen and (max-width: 600px) {
    nav {
        height: auto;
    }
    nav ul {
        width: 100%;
        display: block;
        height: auto;
    }
    nav li {
        width: 50%;
        float: left;
        position: relative;
    }
    nav li a {
        border-bottom: 1px solid #576979;
        border-right: 1px solid #576979;
    }
    nav a {
        text-align: left;
        width: 100%;
        text-indent: 25px;
    }
}
/*how the navigation is displayed when the screen get smaller by 480px or lower (so this is our second breakpoint)*/
@media only screen and (max-width : 480px) {
    nav {
        border-bottom: 0;
    }
    nav ul {
        display: none;
        height: auto;
    }
    nav a#pull {
        display: block;
        background-color: #283744;
        width: 100%;
        position: relative;
    }
/* Psuedo code :after's width, height, display etc. doesn't work in browsers. showing error.*/
    nav a#pull:after {
    content:"";
    background: url('nav-icon.png') no-repeat;
    width: 30px;
    height: 30px;
    display: inline-block;
    position: absolute;
    right: 15px;
    top: 10px;
  }
}
 /*screen gets smaller by 320px and lower the menu will be displayed vertically top to bottom.*/*/
 @media only screen and (max-width : 320px) {
     nav li {
         display: block;
         float: none;
         width: 100%;
     }
     nav li a {
         border-bottom: 1px solid #576979;
     }
 }
</code></pre>

<p>Any ideas?</p>