Browser displaying a CSS error: "Invalid property name" while applying pseudo-element :after

I encountered an issue in Chrome and Explorer while attempting to set a CSS property for a pseudo element :after. (I'm trying to create a styled burger nav icon)

The error message I received was:

'Unknown property name'

This happened when setting the properties like width, height, background for the pseudo element :after. Here is how it looked in Chrome:

https://i.stack.imgur.com/vQaea.png

The section of code causing the error is as follows:

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 thoughts on a solution?

javascripthtmlcss

Answer №1

When inspecting the chrome console, you may notice 4 characters that appear to be improperly encoded before the final properties. These characters align with a 4-space indent pattern. It's possible that there are unusual characters in your CSS file masquerading as spaces which were lost when pasting the code.

Have you considered removing the leading spaces before these properties to see if that resolves the issue?

Answer №2

It appears to be functioning in this instance, which is essentially a duplicate of your code. If there are any hidden characters in your url() or if the browser needs to be restarted, it might be worth reentering your url(). Sometimes after working in the console for hours, I find that restarting Chrome can solve the issue.

window.onload = function() {
        if (window.jQuery) {
          // jQuery is loaded
          alert("Success!");
        } else {
          // jQuery is not loaded
          alert("Not Working");
        }
      }
      // Get the pull (extra menu icon) div and add an event handler to show the menu (the original old 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;

    ...
}
<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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Optimize the performance of filtering large GeoJSON files using Ajax in leaflet for the

I am managing four 2MB geoJson files with four different Layers that need to be loaded. Each layer is loaded using the following code: LayerBoon = L.geoJSON.ajax(URL, {pointToLayer:returnBoonMarker, filter:filtertext}); There is also a button click functi ...

javascriptajaxfilterleafletgeojson

CKeditor does not accept special characters or diacritics in keywords

Recently, I came across a helpful code snippet for CKeditor that counts and ranks the most used words in a textarea. This feature is invaluable for generating SEO-keywords suggestions while writing articles. However, there is an issue with non-English char ...

javascripthtmljquerycssckeditor

Converting and downloading CSV to XLSX directly from the front end using TypeScript and React

After successfully converting a JSON response to CSV format for download using the function below, I am now looking to achieve the same functionality but with xlsx files on the front end. The current function works well for CSV files and handles Japanese ...

javascriptreactjsexceltypescriptcsv

What is the best way to send additional data with getServerSideProps() in Next.js?

Not sure if this is a silly question, but I am currently working with a Django API and attempting to implement pagination on the search page using Next.js. As a newbie to Next.js, I have scoured the web for a solution but haven't found anything helpfu ...

javascriptwebnext.js

Prevent mouse over scrolling for every <select> element on a webpage using JQuery

My code seems to be having some issues. Can you help me figure out what's wrong? <script type="text/javascript" language="javascript"> //trying to disable scrolling on mouse over of <select> elements $(document).ready(function() { ...

javascriptjqueryscrollmouseeventmouseover

Is there a way to restrict the number of line breaks in a multiline asp:TextBox control?

Is it possible to restrict a multiline asp:TextBox to only display content on 3 lines using either javascript or C#? ...

javascriptc#asp.net

Is there a simple way to delete an element from a multidimensional array object in React JS?

In my current project using React Js, I'm facing an issue with removing an item that corresponds to the "product_option_value_id". The task at hand is to remove an item from the product_option_value (a child array object) if the given itemId matches t ...

javascriptarraysjsonreactjsarrayobject

"Encountering a problem with a function showing an undefined error

Trying to incorporate a slider feature into my application led me to reference this w3schools sample. However, upon loading the page, the images briefly appear before disappearing. Additionally, clicking on the arrow or dots triggers an error stating: U ...

javascriptjqueryhtmlarraysslider

Having problems with loading @font-face in Ionic Framework Android app build?

While working on an app in Ionic Framework, I encountered a peculiar issue. https://i.stack.imgur.com/xk8uD.png In my Ionic Framework application, I am importing @font-face and running the app on an Android device (Galaxy SIII). Strangely, the font (Mont ...

androidcssangularjsionic-frameworkfont-face

Executing an HTTP POST request without properly encoding a specific parameter

I am attempting to communicate with an unauthorized third-party API using Node and the request module. Below is the code that generates the request: request.post( { url: url, headers: MY_HEADERS_HERE, followAllR ...

javascriptnode.jstypescriptnode-request

What could be the reason for my CSS selector with :target not functioning properly?

I tried to implement the instructions I found online for using :target, but it's not working as expected. My goal is to change the background color and font color of #div1 when the first link is clicked, and to change the border of #div2 when the seco ...

htmlcss

How can we use JavaScript to close a dropdown menu when the user clicks outside of it?

I am facing an issue with my code. I want to close the dropdown menu when clicking outside of it or on the items within the dropdown. How can I achieve this? I attempted to use addEventListener('click', myFunction) on `document` but it did not w ...

javascripthtmlcssevent-listener

Transform an HTML table string into JSON format

I discovered a useful library called table to JSON that allows me to convert an HTML Table to JSON using its ID (#testtable in the example below): var table = $('#testtable').tableToJSON(); alert(JSON.stringify(table)); However, I am interested ...

javascriptjqueryjsonhtml-table

Tips on effectively utilizing dynamic data with Google Charts

I am working on creating a dynamic chart using Google Charts with multiple CSV files. I want to display a different chart depending on the selection made by the user. The first file loads successfully and displays a chart, but the $("#selection").change(.. ...

javascriptjquerygoogle-visualization

JavaScript is failing to update the table values as users interact with it

I've created an HTML table and used PHP to populate the values. The goal is to allow users to update order statuses with a status and message input. Initially it works fine, but after multiple uses, it either updates the wrong row or doesn't up ...

javascriptphphtml

Tips for sending all form elements via ajax without explicitly mentioning their names

I'm developing an application with a dynamic form generation feature. When a button is clicked, I need to send all the form elements to another page using Ajax. The challenge is that since the form is generated dynamically, I am unable to specify elem ...

htmlajax

Maintaining a fixed header that remains visible while scrolling through a dropdown menu in Angular

In my application, I have a mat-select widget that displays a list of options. When scrolling within the list, I find it difficult to keep track of all the options. I am looking to enhance the user experience by adding a fixed header at the top of the opt ...

htmlcssangulartwitter-bootstrapflexbox

Find the sum of values in an array of objects if they are identical

[{ingName: "milk", quantity: "1.5", unit: "cups"}, {ingName: "sugar", quantity: "0.25", unit: "cups"}, {ingName: "vanilla extract", quantity: "1.0", unit: "tsp&quo ...

javascriptarraysreactjs

Tips for maintaining focus while tabbing in a contenteditable field?

Why does the table lose focus every time I press tab instead of inserting a white space? How can I change this so that pressing tab just inserts a regular tab space? ...

javascriptjqueryhtml

Capture cached images stored in the browser memory without relying on the source attribute of the <img> tag

Imagine you're managing a website, samplewebsite.com and you find that the images on it have been resized to very low quality. When you click on an image, you are directed to a 'view_image' page, for example samplewebsite.com/view?image=u ...

javascriptjavahtmljsoupbrowser-cache