Images as list milestones with CSS

When we create a list in HTML, for each element of the list, we can detect two parts: the mark or milestone that starts the element and the text of the item of the list. Thanks to CSS we can make the list milestones images, thus increasing the number of iconography offered by the HTML, which by default are circle, square and ellipse.

To have images as list milestones with CSS the first thing we have to do is create a list. For this we created a unordered list, using the element
ul
. The code HTML will be as follows:

<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
<li>Element 6</li>
<li>Element 7</li>
</ul>

We see that each of the elements in the list is specified using the element
li
, which serves us in the same way for ordered or unordered lists.

The next thing will be to modify the milestone of each of the elements. To put an image in the milestone of the list item we will use the property CSS

list-style-image
. The property structure
list-style-image
is the following:

list-style-image : <uri> | none | inherit

This way our code will look like this:

ol {
   list-style-image: url('document.gif');
}

The name of the file containing the image must be specified using a URI. To do this we rely on the url() function, which receives as a parameter the url where the file is located. The URL may be relative (../imagenes/documento.gif)) or absolute (https://lineadecodigo.com/imagenes/documento.gif).

If we use images as landmarks we can take the precaution of specifying a style for the items in case the browser does not find the file with the image. We specify the CSS styles using the
list-style-type
. In this way we will increase the definition of our element which will look like this:

ol {
   list-style-image: url('document.gif');
   list-style-type: square;
}

And this simple code helps us to have images as list milestones with CSS. Have you ever used or are you thinking of using images as list milestones? If so, tell us your experience in the comments on the page. We will be excited to hear about your experiences.