How do you make custom icons for bullet points in html/css/javascript-CodePudding

I am working on a homepage for my website and I am trying make a custom bullet point. I have the file uploaded to the image folder of the project I am working on, but everytime I test to see if it works nothing comes up. I have it in the css under the ul tag as list-style-image: url('dash.gif') and I have two script commands on the HTML that are doing trying to do the same thing with each of them being

<script>
    function myFunction() {
        document.getElementById("myUL").style.listStyleImage = "url('dash.gif')";
    }
</script>
<script>
    function myFunction() {
        document.getElementById("myUL").style.listStyleImage = src = "dash.gif";
    }
</script>

Does anyone know how I might be able to fix this? Any help would be appriecated.

CodePudding user response：

I would try it with css

#myUL > *{
position: relative;
}
#myUL > *:before{
 content: "";
 height: 10px;
 width: 10px;
 background-img: url("your-url");
 position: absolute;
 right 100%;
 }

CodePudding user response：

Try it

#myUl {
   list-style: url('dash.gif');
}