Добавить изображение перед ссылкой в ​​зависимости от его URL

Question

У меня есть простой список, такой как

<ul>
     <li><a href="index.html">Home</a></li>
     <li><a href="about.html">About</a></li>
     <li><a href="contact.html">Contact</a></li>
</ul>

Можно ли добавить различные изображения к элементам списка перед тегами <a></a> в зависимости от URL, чтобы я мог есть что-то вроде этого:

<ul>
    <li><img src="img-1.png"> <a href="index.html">Home</a></li>
    <li><img src="img-2.png"> <a href="about.html">About</a></li>
    <li><img src="img-3.png"> <a href="contact.html">Contact</a></li>
</ul>

К сожалению, я не эксперт в javascript, поэтому буду признателен за любую помощь.

Answer 1

Я бы сделал это в CSS так:

a {
    display: inline-block;
    padding-left: 40px;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 32px auto; /* if the image is bigger */
}

a[href='index.html'] {
    background-image: url('img-1.png');
}

a[href='about.html'] {
    background-image: url('img-2.png');
}

a[href='contact.html'] {
    background-image: url('img-3.png');
}