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

Question

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?

@AdrianKokot Adding a checkmark to the LI. It is not in the actual website but IS in the jsfiddle with the same CSS — mplungjan, Sep 29 '21 at 06:17

score 3 · Accepted Answer · answered Sep 29 '21 at 06:19

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

score 2 · Answer 2 · answered Sep 29 '21 at 06:20

2

After inspecting your css codes, found out that commenting broke the rules (line 2345 to 2447)

So after removing whole block, rules works

answered Sep 29 '21 at 06:20

Dave Runner

226
1
5

Adrian Kokot · Answer 3 · 2021-09-29T06:26:11.217

To modify lis appearance, you could use list-style-image on your ul element.:

.holder-features ul {
    list-style-image: url("https://www.datanumen.com/temp/check.svg?");
}

<div class="tab-content holder-features selected"
    data-tab="2">
    <section class="wrapper">
        <h2 style="text-align: center;">Main Features</h2>

        <hr>

        <ul>
            <li>Support 32bit and 64bit.</li>
            <li>Support for Windows 95/98/ME/NT/2000/XP/Visa/7/8/8.1/10 and Windows Server 2003/2008/2012/2016/2019.
                Both
                32bit and 64bit operating systems are supported.</li>
        </ul>
        <hr>
    </section>
</div>

Or simpler: `list-style-type: "✓";` – mplungjan Sep 29 '21 at 06:25 — mplungjan, Sep 29 '21 at 06:25

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

3 Answers3