Insert Image After Each List Item

Insert image after each list item

The easier way to do it is just:

ul li:after {
    content: url('../images/small_triangle.png');
}

Adding an image in front of List Item

There are several methods to add an image to a list item.

Here is one using a background image. http://jsfiddle.net/p05g14zm/

rightNav2 li {
  display: inline;
  padding-right: 6px;
  padding-left: 20px;
  color: white;
}

.rightNav2 #homeLnk {
    background-image: url('http://i.stack.imgur.com/vQ4nM.jpg?s=32&g=1');
    background-repeat: no-repeat;
    background-size: contain;
}

html/css adding an image for every for every listitem in my menu

please update below css with this one

#menu li a{
    display:block;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;

    color:#ffffff;

    text-decoration:none;

    background-color: #376596;

    padding-top:2px;
    padding-left: 20px;
    padding-bottom: 2px; 

     background-image:url('http://images.subeta.net/smilies/6398_emoticon_smile.gif');
        background-repeat:no-repeat;

}

you can check live click here

Adding single image after a specific list item

use nth-child selector, like this:

.menuStyling li:nth-child(2):after{
 content: url('../img/arrowActive.png');
}

where the 2nd <li> will have the image.

see more on nth-child here

see a snippet below

.menuStyling li:nth-child(2):after {

  content: " this is after child  list item 2";

  color: green

}

<ul class="menuStyling">

  <li>item 1</li>

  <li>item 2</li>

  <li>item 3</li>

  <li>item 4</li>

</ul>

---

Related Topics