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

Create a stylish border around an ion-card using a sleek black bar

I have a card element with a title and subtitle, and I want to add a black bar above the header. <ion-list> <ion-card (click)="onEventClick(event.id)" *ngFor="let event of events"> <ion-card-header> ...

htmlcssionic4

I'm encountering an error with the *ngIf directive in my Angular reactive form - any ideas on

Despite my reputation, I have a question that is causing me some confusion. I am trying to create a reactive form using an example on Stackblitz. While everything seems fine in Stackblitz and the code works correctly there, I encounter an error in VS Code ...

htmlangularangular-reactive-forms

Accessing elements from a controller in a nested ng-repeat in AngularJS

I am relatively new to the world of AngularJS and I've encountered a challenge that I can't seem to figure out. The issue lies within my nested ng-repeat view, as I have a nested comment system. Therefore, the view is built from an object structu ...

javascriptangularjs

Creating a Vue application utilizing a function with an unspecified purpose

Looking to create an app with a function that is currently undefined. On the production server, there is a function called __doPostBack which I am calling from my Vue app like this: getLabel(templateName) { __doPostBack(templateName, ""); } Afte ...

javascriptvue.jswebpack

Looking to verify a disabled select element and adjust the opacity of that element when it is disabled

$_product = $this->getProduct(); $_attributes = Mage::helper('core')->decorateArray($this->getAllowAttributes()); ?> <?php if ($_product->isSaleable() && count($_attributes)):?> <dl> <?php foreach($_attrib ...

javascriptjqueryhtmlcssmagento-1.9

Maintaining selected options in select lists while updating model data in Angular

New to Angular and exploring the Product object with Sku objects nested inside. An app allows users to fetch a product, resulting in the Product object being assigned to $scope.product: var app = angular.module('app', []); app.controller(&apos ...

javascriptangularjs

Video background mute feature malfunctioning

I've searched through numerous resources and reviewed various solutions for this issue, yet I still haven't been able to figure it out. Could someone please guide me on how to mute my youtube embedded video? P.s. I am a beginner when it comes to ...

javascripthtmlvideoyoutube-javascript-apimute

Using JavaScript to generate a <style> element and accessing the cssRules

After spending countless hours trying to solve this problem, I'm hoping that my question isn't too foolish. This is a continuation of a previous question about creating a style tag with JavaScript on Stack Overflow. The solutions provided by Tom ...

htmlcssgoogle-chromesafaristylesheet

"After executing a loop in JavaScript using jquery.ajax, the success function does not perform

Having trouble passing values from a PHP file to another function in Javascript. Even after a successful FOR LOOP, nothing seems to work within the SUCCESS block. Any suggestions? url1 = 'http://localhost:81/Dashboard/admin/inc/dashboard.php'; $ ...

javascriptphpjqueryajax

D3.js Issue: The <g> element's transform attribute is expecting a number, but instead received "translate(NaN,NaN)"

I encountered an error message in my console while attempting to create a data visualization using d3. The specific error is as follows: Error: <g> attribute transform: Expected number, "translate(NaN,NaN)". To build this visualization, I ...

javascriptd3.jsdata-visualization

Incorporate various style components to enhance the appearance of an item in ExtJS

I'm attempting to add ellipsis to an item created by ExtJS. My goal is to only modify this item without adding any additional CSS files. After researching, I discovered there is a "style" parameter that accepts CSS styles and attempted the following: ...

javascripthtmlcssextjs

Every time I attempt to compile NodeJS, I encounter a compilation error

Within mymodule.js var fs = require('fs') var path = require('path') module.exports = function(dir, extension, callback){ fs.readdir(dir, function(error, files){ if(error) return callback(error) else { ...

javascriptnode.js

Use YUI to parse JSON data enclosed in square brackets and curly braces within a packet

Recently, I have been diving into the world of JSON, JavaScript, and YUI while working on a homework assignment. The JSON packet I am dealing with has the following structure: [{"id":"1234", "name":"some description","description":"url":"www.sd.com"}, {sa ...

javascriptajaxyui

Guide to acquiring the webViewLink using Google Drive Api v3?

I'm having trouble locating the webViewLink. The documentation (https://developers.google.com/drive/api/v3/reference/files) states that I should receive this parameter when requesting gapi.client.drive.files.list(). However, I don't even have a c ...

javascriptvue.jsgoogle-drive-api

Easy steps to dynamically add buttons to a div

I need help with a JavaScript problem. I have an array of text that generates buttons and I want to add these generated buttons to a specific div element instead of the body. <script> //let list = ["A","B","C"]; let list = JSON.p ...

javascripthtml

Creating an Angular JS controller that utilizes a filter for a JSON array of objects

I have the following JSON data and I'm trying to determine the number of objects with Status: 1 in the JSON. The approach I've taken so far is not working. I understand that ng-filter should only be applied to Arrays, but I'm struggling to ...

javascriptangularjsangularjs-controllerangularjs-filterng-filter

Two separate entities link to a shared occurrence

Two namespaces are at play here: '/' and /notification If I trigger an event in the '/' namespace, how can I listen to the same event in the '/notification' namespace? It would be helpful if someone could provide an explanati ...

javascriptnode.jsexpresswebsocketsocket.io

Is there a way to conceal a component using Twitter Bootstrap while having the ability to reveal it with the help of

Suppose I generate an HTML element in the following manner, <div id="unique-div" class="concealed">Hello, TB3</div> <div id="unique-div" class="hide-me">Greetings, TB4</div> <div id="u ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to keep calling an AJAX function until it receives a response from a previous AJAX call

I am looking to continuously call my ajax function until the previous ajax call receives a response. Currently, the page is loading every second and triggering the ajax function, but I want it to keep calling the ajax function until the previous one has c ...

javascriptphpjqueryajax

What is the best way to send the index of an array to a onClick event in ReactJS?

const DisplayInventory = ({ items }) => <div className="row"> {items.map((item, i) => <div className="item" key={"item_" + i}> <div className="card hoverable col s3"> <img onClick={purchase ...

javascriptreactjsecmascript-6jsx