Why the CSS rule does not apply on real HTML page but does on JSFiddle?

Issue

In my website, I write the following CSS rule:

.holder-features ul li:before {
  content: "";
  background-image: url(/image/icons/check.svg);
  display: block;
  width: 10px;
  height: 10px;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}

Then in the web page http://www.sybase-recovery.com/outlook-repair/, when clicking "Features" tab, and select one of the listing item, I use DevTools to inspect the element, but cannot find the rule .holder-features ul li:before is applied.

I then copy the listing and the CSS code to JSFiddle, and then simplified the listing codes, then try again, but find the CSS rule does apply. See https://jsfiddle.net/alanccw/9oucLfrx/10/

Why?

Solution

The issue is caused by a typo you have commented multiple inside a single css and caused the error

consider changing it into

/*
.holder-features ul li:before {
    display: none;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f00c";
    content: url("/images/icons/check.svg");
}
*/

After changing this you will see the :before as you expected

Answered By – Viira

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0