How to select and manipulate specific <li> elements present with pseudo-elements such as ::marker, ::before using javascript

Question

I'm looking for a way to access the <li> elements present with pseudo-elements such as ::before and ::marker using Javascript. So far I'm not able to write a unique selector for those <li> elements which can highlight only those which are present with ::before or ::marker . Any ideas would be great.

 document.querySelectorAll('div.simple-description"] li').forEach((li) => { if ((li.querySelector('li'), 'marker') === "marker") { li.setAttribute('bullet', "true") } })

 <div class="simple-description"> <p>Sample data Sample data Sample data Sample data</p> <li>Without marker</li> <li>::marker DATA with::marker</li> <li>::marker Want to access this</li> <li>::before Data with::before</li> </div>

Sample URL to try this on: https://www.windeln.de/aussie-spuelung-repair-miracle.html

Answer 1

Cannot get by selector just loop through ol and get the li type

$("ol").each(function() {
                    
    var thisType = $(this).attr("type"); //get type
    
    if (thisType == "1" || thisType == "a") { //filter by what type
        $(this).find('li'); //your element
    }
    
});