CODEWITHSUNDEEP
htmlcssliststyleshtml-lists
JZK
JZK

Reputation: 577

Increase width in UL list bullets

how to style UL list bullets. I'm using squares and all I need is to increase width. Is there any way how to do it except using custom images ? Thank you

Upvotes: 0

Views: 95

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

Something like this, using ::before and using content CSS:

ul li {
  list-style: none;
}
ul li::before {
  content: "";
  display: block;
  border: 2px solid #000;
  width: 10px;
  margin-left: -20px;
  margin-top: 1em;
  margin-bottom: -0.67em;
}
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

Preview

preview

Upvotes: 4

Related Questions