- This topic is empty.
-
AuthorPosts
-
February 13, 2021 at 5:48 am #9166David HoangKeymaster
You can hide them using
::marker
pseudo-element.- Transparent
::marker
ul li::marker { color: transparent; }
ul li::marker { color: transparent; } ul { padding-inline-start: 10px; /* Just to reset the browser initial padding */ }
<ul> <li> Bullets are bothersome </li> <li> I want to remove them. </li> <li> Hey! ::marker to the rescue </li> </ul>
::marker
empty content
ul li::marker { content: ""; }
ul li::marker { content: ""; }
<ul> <li> Bullets are bothersome </li> <li> I want to remove them </li> <li> Hey! ::marker to the rescue </li> </ul>
It is better when you need to remove bullets from a specific list item.
ul li:nth-child(n)::marker { /* Replace n with the list item's position*/ content: ""; }
ul li:not(:nth-child(2))::marker { content: ""; }
<ul> <li> Bullets are bothersome </li> <li> But I can live with it using ::marker </li> <li> Not again though </li> </ul>
December 5, 2022 at 10:05 am #9167David HoangKeymasterIn BOOTSTRAP You can remove bullets by setting the list-unstyled class on the parent class of the li tag.
<ul className="list-unstyled"> <li>One</li> <li>Two</li> <li>Three</li> </ul>
- Transparent
-
AuthorPosts
- You must be logged in to reply to this topic.