title: CSS Error in browser: 'Unknown property name' when using pseudo :after
body: <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>