你如何在 html/css/javascript 中為項目符號點制作自定義圖標

Question

我正在為我的網站制作主頁，我正在嘗試制作自定義要點。 我已將文件上傳到我正在處理的項目的圖像文件夾中，但每次我測試它是否有效時，都沒有出現。 我在 ul 標簽下的 css 中有它作為 list-style-image: url('dash.gif') 我在 HTML 上有兩個腳本命令，它們正在嘗試做同樣的事情，每個命令都是

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

有誰知道我該如何解決這個問題？ 任何幫助將不勝感激。

Answer 1

我會嘗試使用 css

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

Answer 2

您可以導入dash.gif ，但它會太大，因為它不會按比例縮小。 如果要創建自定義列表樣式類型，請使用svg格式。 如果你只想在li之前破折號添加這個。

li::before {
   content: "-"
}

並且改變已經存在的li::before到li::after那樣

li::after {
    content: '';
    position: absolute;
    width: 120%;
    height: 4px;
    border-radius: 4px;
    background-color: #18272F;
    bottom: 0;
    left: 0;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .3s ease-in-out;
}

li:hover::after {
    transform-origin: left;
    transform: scaleX(1);
}