'How can I insert an image or icon before or after my list items in an html file?

<!DOCTYPE html>

<head>
  <title>Hanieh jannesari</title>
  <style>
    ul {
      list-style: none;
    }
    
    ul li {
      background-image: url ('tiny. gif'/'https://cdn.dribbble.com/users/166034/screenshots/4252718/media/d0338106a8519f3120dd9a3536b95d6b.gif');
      background-repeat: no-repeat;
    }
  </style>
</head>

<body>
  <ol type="1" start="1">
    <li>color of love</li>
    <li>color of fame</li>
    <li>color of anger</li>
  </ol>
  <ul type="star">
    <li>color of love</li>
    <li>color of fame</li>
    <li>color of anger</li>
  </ul>
</body>

I decided to insert some icons beside each list item in the ul, but unfortunately when I refer it locally to the folder I stored in my system (located in the same directory) and I link it to the http address, it does not work. I wonder what is wrong with the above code?

html


Solution 1:[1]

You should use before to show your gif before your list. I insert this but your image is too big, it is better to use icon or svg and with hover give it animate

ul {
  list-style: none;
}

ul li {
  background-image: url ('https://cdn.dribbble.com/users/166034/screenshots/4252718/media/d0338106a8519f3120dd9a3536b95d6b.gif');
  background-repeat: no-repeat;
}

ul li::before {
  content: '';
  background: url('https://cdn.dribbble.com/users/166034/screenshots/4252718/media/d0338106a8519f3120dd9a3536b95d6b.gif');
  /* with class ModalCarrot ??*/
  /*or absolute*/
  /*a number that's more than the modal box*/
  width: 50px;
  height: 70px;
  display: inline-block;
  margin-right: 5px;
  z-index: 10;
  background-position: center;
  vertical-align: middle;
}
<!DOCTYPE html>

<head>
  <title>Hanieh jannesari</title>

</head>

<body>
  <ol type="1" start="1">
    <li>color of love</li>
    <li>color of fame</li>
    <li>color of anger</li>
  </ol>
  <ul type="star">
    <li>color of love</li>
    <li>color of fame</li>
    <li>color of anger</li>
  </ul>
</body>

Solution 2:[2]

Adding

background-size: cover;
height: 100vh;

to the css works and it will insert the gif in your ul li element.

You can see its working example below.

<!DOCTYPE html>

<head>
  <title>Hanieh jannesari</title>
  <style>
    ul {
      list-style: none;
    }
    
    ul li::before {
      content: '';
      background: url('https://cdn.dribbble.com/users/166034/screenshots/4252718/media/d0338106a8519f3120dd9a3536b95d6b.gif');
      width: 70px;
      height: 80px;
      display: inline-block;
      margin-right: 5px;
      z-index: 10;
      background-position: center;
      vertical-align: middle;
    }
  </style>
</head>

<body>
  <ol type="1" start="1">
    <li>color of love</li>
    <li>color of fame</li>
    <li>color of anger</li>
  </ol>
  <ul type="star">
    <li>color of love</li>
    <li>color of fame</li>
    <li>color of anger</li>
  </ul>
</body>

and if you don't want the gif in the text's left position then you can try out :

<!DOCTYPE html>
<head>
  <title>Hanieh jannesari</title>
  <style>
    ul {
      list-style: none;
    }
    
    ul li {
      content: '';
      background: url('https://cdn.dribbble.com/users/166034/screenshots/4252718/media/d0338106a8519f3120dd9a3536b95d6b.gif');
      width: 70px;
      height: 150px;
      margin-right: 5px;
      margin-top: 10px;
      z-index: 10;
      background-position: center;
    }
  </style>
</head>

<body>
  <ol type="1" start="1">
    <li>color of love</li>
    <li>color of fame</li>
    <li>color of anger</li>
  </ol>
  <ul type="star">
    <li>color of love</li>
    <li>color of fame</li>
    <li>color of anger</li>
  </ul>
</body>

Solution 3:[3]

in case we know JavaScript, we can add function to our html codes, otherwise we should use pseudo lass or pseudo elements to make that happen. with the help of ::after and ::before tags we can insert any image or icon before any item.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Arman Ebrahimi
Solution 2
Solution 3 Hanieh Jannesari

Related Questions