javascript - CSS Error in browser: 'Unknown property name' when using pseudo :after

I am getting the following error in Chrome and Explorer when trying to set css property of a pseudo :after. (I'm trying to set a burger nav icon and style it)

I am getting the error:

'Unknown property name'

when I set the width, height, background etc. of pseudo :after. Here it is in Chrome:

The code that is giving me the 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;

Full HTML Code

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

    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 > 320 && menu.is(':hidden')) {
          menu.removeAttr('style');
        }
    });
    </script>


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

Full CSS 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;
     }
 }

Any ideas?

I am getting the following error in Chrome and Explorer when trying to set css property of a pseudo :after. (I'm trying to set a burger nav icon and style it)

I am getting the error:

'Unknown property name'

when I set the width, height, background etc. of pseudo :after. Here it is in Chrome:

The code that is giving me the 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;

Full HTML Code

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

    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 > 320 && menu.is(':hidden')) {
          menu.removeAttr('style');
        }
    });
    </script>


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

Full CSS 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;
     }
 }

Any ideas?

Share Improve this question edited Jul 12, 2016 at 2:30 L777 8,4573 gold badges43 silver badges66 bronze badges asked Jul 12, 2016 at 2:08 Code2016 1071 gold badge3 silver badges13 bronze badges

Can you create a plnkr plnkr.co to demonstrate? – guest271314 Commented Jul 12, 2016 at 2:13
is it happening after the burger click is triggered? or on page load directly?? – Nishanth Matha Commented Jul 12, 2016 at 2:18
In my case, I check my spelling carefully againn and I find my spelling error – yu yang Jian Commented Jul 14, 2019 at 8:41

Add a comment |

2 Answers 2

Sorted by: Reset to default 13

In chrome console you can see that there are 4 apparently incorrectly encoded characters before the last few properties. It matches with the 4 spaces indent . There might be some exotic characters showing as space in your CSS file that didn't make it when you pasted your code in here.

Can you simply try to delete the indenting spaces in front of these properties and see if that works?

It seems to work in this example that is almost entirely a copy of your code. I know it's a long shot, but maybe reenter your url() in case it has a hidden character in it or restart the browser. After several hours of console work I sometimes need to restart chrome.

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 > 320 && menu.is(':hidden')) {
        menu.removeAttr('style');
      }
    });

* {
  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('http://lorempixel.com/72/72/') 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;
  }
}

<nav class="clearfix">
  <ul class="clearfix">
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">How-to</a>
    </li>
    <li><a href="#">Icons</a>
    </li>
    <li><a href="#">Design</a>
    </li>
    <li><a href="#">Web 2.0</a>
    </li>
    <li><a href="#">Tools</a>
    </li>
  </ul>
  <a href="#" id="pull">Menu</a>
</nav>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - CSS Error in browser: 'Unknown property name' when using pseudo :after - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)