How to add a button to an image using CSS ?

How to add an image as the list-item marker in a list using CSS ?

Last Updated : 15 Oct, 2020

The approach of this article is to learn how to add an image as the list-item marker in a list using list-style-image Property in CSS.

Syntax:

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

Example:

html

<!DOCTYPE html>
<html>

<head>
    <style>
        ul {
            list-style-image: url(
"https://write.geeksforgeeks.org/wp-content/uploads/listitem-1.png");
        }
    </style>
</head>

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

    <h2>
        How to add an image as the
        list-item marker in a list using CSS?

    </h2>

    <p>Programming Languages</p>

    <ul>
        <li>c++</li>
        <li>Java</li>
        <li>PHP</li>
        <li>python</li>
    </ul>
</body>

</html>

Output:

Supported Browsers:

Google Chrome
Internet Explorer
Firefox
Opera
Safari

How to add a button to an image using CSS ?

M

manaschhabra2

Improve

Article Tags :

Similar Reads

How to add a mask to an image using CSS ?

The mask-image property in CSS is used to set the mask of an image or text. CSS masking is used to form a mask layer for a particular element. You can add a mask to an image using the mask-image property in CSS. In this article, you will get to know the different property values of mask-image proper

How to Add Image in Text Background using HTML and CSS ?

In this article, we will use HTML and CSS to set the image in the text background. To set the image in the text background, some CSS property is used. To add an image in the text background using HTML and CSS, create a container element (e.g., a `<div>`), set its background to the desired imag

How to add a button to an image using CSS ?

In the article, we will explore how to add a button to an image using CSS. Adding a button to an image is often used to create an overlay effect to a button on an image that provides an interactive and engaging layout on a webpage. We can achieve this effect with the combination of various CSS Prope

How to Place Text Blocks Over an Image using CSS?

Placing text blocks over an image is a common technique used in web design to create visually appealing layouts. Here, we will explore different approaches to achieve this effect using CSS.Below are the approaches to place text blocks over an image using CSS:Table of Content Using Absolute Positioni

How to Add Border to an Image Using HTML and CSS?

Adding a border to an image means putting a line around the image to make it look better and more noticeable. To add a border to an image using HTML and CSS, we can use the <img> tag and apply CSS styles like border, border-width, and border color to customize the border's appearance.Syntax.im

How to Place Text Over an Image using CSS?

Place Text Over an Image means overlaying text on top of an image using HTML and CSS. This effect is commonly achieved by placing the image and text inside a container and then using CSS techniques like absolute positioning, z-index, or flexbox to position the text over the image.Below are the appro

How to make whole area of a list item in navigation bar is clickable using CSS ?

Making the entire area of a list item in a navigation bar clickable enhances user experience, especially on mobile devices. By styling the <a> tag to occupy the full list item, users can easily interact with larger, more accessible touch targets.here are some methods that are described below:

How to use Google material icon as list-style in a webpage using HTML and CSS ?

Icons can be added to our HTML page from the icon library. All the icons in the library can be formatted using CSS. They can be customized according to size, colour, shadow, etc. They play a considerate part in materialize CSS. Materialize CSS provides a rich set of material icons of google which ca

How to Set the List Style Image in Tailwind CSS ?

Tailwind CSS is a Utility-first CSS framework for building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all the building blocks you need. These are the following approaches by using these we can customize the list-style image: Table of Content List Style Image

How to set the list-item marker appear inside the content flow in CSS ?

The task is to set the list-item marker to appear inside the content flow in CSS. To specify the type of list item marker you can use the list-style-type and list-style-position property. Content flow is the set of rules that defines which element comes before another one, which one sits on top of a