- Instant help with your CSS coding problems

Use custom bullet symbol for list elements

Snippet added on Jul 19, 2022 by Mike

Question:

How to use custom bullet symbol for list elements?

Answer:

li::marker {
    content: '$ '
}

Description:

If you want to change the bullets in HTML lists, but don't have the desired character in the list-style-type property list and don't want to use images or emojis, the ::marker pseudo-element may be the solution.

The ::marker CSS pseudo-element selects the marker box of a list item, which typically contains a bullet or number. Using its content property you can set any character or string as a bullet.

Reference:

The ::marker reference

Share "How to use custom bullet symbol for list elements?"

Related snippets:

Tags:

custom, bullet, dot, style, change, set, custom bullet, custom dot, list, html, css

Technical term:

Use custom bullet symbol for list elements

Trending articles

Use clip path in TailwindCSS Set focus border in TailwindCSS Create hover underline animation in TailwindCSS Truncate text in TailwindCSS Create triangles with TailwindCSS Create custom toggle button with TailwindCSS Implement Dark mode with TailwindCSS How to create custom checkboxes in TailwindCSS Fix the Unknown at rule @tailwind warning in VSCode Fix TailwindCSS breaks existing styles

Trending snippets

Remove focus border around input element Create endless rotation animation in CSS How to use !important in TailwindCSS Center an absolute element in TailwindCSS Add class to child when hovering on parent in TailwindCSS Add a box shadow to only one side of an element Add text shadow with Tailwind CSS Add dots if text is too long Create a neon effect with TailwindCSS Access child elements in TailwindCSS Change bullet size in HTML Select the nth child in TailwindCSS Force line break in a long word using CSS Select first child in TailwindCSS How to use calc() in TailwindCSS Use emoji instead of list style How to use CSS variables in TailwindCSS Create horizontal rule with text using TailwindCSS Using :not in TailwindCSS Create blinking background with TailwindCSS

Network articles

Fix the ReactDOM.render is no longer supported in React 18 How to run useEffect only once in React Generate dynamic GUID for each request in Postman Inspect WebSocket traffic with Developer Tools Detect Dark Mode in JavaScript Wrap selection with tag in VS Code Change file encoding in VS Code Edit multiple lines at once in VS Code Check command line arguments in PHP Remove protocol from URL with JavaScript Convert snake case to camel case in JavaScript Get the minimum value in an array using JavaScript Get selected option from select using JavaScript Solving the Error: unsupported class file major version Toggle minimap in VS Code Get same day in the next week in PHP Get the last day of a month from date in PHP Convert hexadecimal to decimal in PHP PHP for Dummies Center content within an element

Interesting things

OpanAi's ChatGPT