I have created an unordered list. I feel the bullets in the unordered list are bothersome, so I want to remove them.
Is it possible to have a list without bullets?
I have created an unordered list. I feel the bullets in the unordered list are bothersome, so I want to remove them.
Is it possible to have a list without bullets?
You can remove bullets by setting the list-style-type to none on the CSS for the parent element (typically a <ul>), for example:
ul {
list-style-type: none;
}
You might also want to add padding: 0 and margin: 0 to that if you want to remove indentation as well.
See Listutorial for a great walkthrough of list formatting techniques.
To completely remove the ul default style:
list-style-type: none;
margin: 0;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
padding-inline-start: 0;
If you are developing an existing theme, it's possible that the theme has a custom list style.
So if you cant't change the list style using list-style: none; in ul or li tags, first check with !important, because maybe some other line of style is overwriting your style. If !important fixed it, you should find a more specific selector and clear out the !important.
li {
list-style: none !important;
}
If it's not the case, then check the li:before. If it contains the content, then do:
li:before {
display: none;
}
You can hide them using ::marker pseudo-element.
::markerul 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 contentul 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>
<div class="custom-control custom-checkbox left">
<ul class="list-unstyled">
<li>
<label class="btn btn-secondary text-left" style="width:100%;text-align:left;padding:2px;">
<input type="checkbox" style="zoom:1.7;vertical-align:bottom;" asp-for="@Model[i].IsChecked" class="custom-control-input" /> @Model[i].Title
</label>
</li>
</ul>
</div>