I was reading this article to customize the bullet lists (li tags) in my posts in a WordPress website. But when I want to add these CSS codes:

   list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23808"><path d="M18 4c-4-1-6 3-6 3s-2-4-6-3-4 6-2 8l8 8 8-8c2-2 2-7-2-8z"></path></svg>');

in my "WordPress" site in the "Additional CSS" sections in "Customizing" part, I get the error Markup is not allowed in CSS. and when I click on publish button, WordPress shows "Unable to save due to 1 invalid setting.". Here is the image of that:

additional-css-error image

I want to know why this is happening and is there any settings or solution for me to be able to add that CSS codes in my website?

  • The X inside list-style-image:url(X) must be a url, not a html statement
    – cjbj
    Nov 29, 2023 at 10:47
  • But the article says that syntax. Is it a limitation in WordPress only? Also Could I change some settings to remove this limitation? Nov 29, 2023 at 13:31
  • Yes, it has to do with how WP parses the code. You could try escaping the html, but success is not guaranteed. An example of how to escape this code is here: developer.mozilla.org/en-US/docs/Web/CSS/url
    – cjbj
    Nov 30, 2023 at 10:20
  • You may also want to check out this: calendar.perfplanet.com/2020/the-dangers-of-data-uris
    – cjbj
    Nov 30, 2023 at 10:22


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.