CSS list-style-image Property

The list-style-image property in CSS is used to replace default list item markers with custom images. It helps create more attractive and visually appealing lists on web pages.

Allows the use of images as bullets for list items.
Enhances the design and creativity of unordered and ordered lists.
Makes web content more engaging and user-friendly.

Syntax:

list-style-image: none | url | initial | inherit;

Property Values:

none	This value specifies that no image is used as the marker. If this value is set, the marker defined in the list-style type is used instead. This is the default value.
initial	This mode sets this property to its default value.
url	In this value, the path to the image is used as a list-item marker.

Methods to use List Style Image Property

1. Using CSS list style image property value as none:

Example: Here, we are using list-style-image: none; property.

html



<html>
<head>
    <title>
        CSS list-style-image Property
    title>


    <style>
        ul {
            list-style-image: none;
        }
    style>


head>

<body style="">
    <h1 style="color:green;">
        GeeksforGeeks
    h1>

    <h2>
        CSS list-style-image Property
    h2>

    <p>Sorting Algorithmsp>

    <ul>
        <li>Bubble Sortli>
        <li>Selection Sortli>
        <li>Merge Sortli>
    ul>
body>
html>

2. Using CSS list style image property value as url:

Example: Here, we use list-style-image: url; property.