Why the CSS rule does not apply on real HTML page but does on JSFiddle? [closed]-CodePudding

Closed. This question is

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

CodePudding user response：

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

So after removing whole block, rules works

CodePudding user response：

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>

Page link：https//www.codepudding.com/frontend/132803.html

Prev:Which has more specificity between hidden attribute in HTML or display property in CSS? And how?

Next:How to get CSS arrow to maintain angle during transformation

Tags：

html

css

pseudo-element

Links：
CodePudding