Creating an image associated with a list, link

Question

Hi, I have an unordered list, where I have a section where theres a list, as shown in this code

<li id = "project"> My Projects </li>

If the project id also matches

#project
{
    list-style-image:url(link.png);
    position:relative;
    left:20px;
    top:100px;
}

I am wondering how I can make this link.png available. I found an example when you click on a picture and it enters the link, but I don’t understand what to do, because it is inside an unordered list (I don’t know any Javascript, by the way, I just recently started to relearn html and CSS)

Answer 1

Question: WHY would you click only for LI?

Think about using exex e better . A large area with clicks = complete happiness.

• ,

#menu li{
  position:relative;
}
#menu li a{
  display:block;
  background:rgba(255,0,0, 0.1);    /* demo: to make visible the clickable area */

  padding-left:45px;
  margin-left:-45px;
}

#li_videos  {list-style-image:url(//placehold.it/30x30/af8);}
#li_project {list-style-image:url(//placehold.it/30x30/f0f);}

<ul id="menu">
  <li id="li_videos"><a href="index.html">Videos</a></li>
  <li id="li_project"><a href="projects.html">Projects</a></li>
</ul>

Hide result

, , :

<li>
    <a href="projects.html"></a> <!-- move me till I overlay the icon list image -->
    My Projects
</li>

CSS, li a , .