css list-style

Different ways to style custom bullets

by sthag

HTML

<ul class="dash">
  <li>bla</li>
  <li>blub</li>
  <li>bli
    <br />mehr</li>
  <li>blorg</li>
</ul>
<ul class="icon-list">
  <li>bla</li>
  <li>blub
    <br />mehr</li>
  <li>bli</li>
  <li>blorg</li>
</ul>
<ul class="symbol-list">
  <li>bla</li>
  <li>blub</li>
  <li>bli
    <br />mehr</li>
  <li>blorg
    <br /> gulp</li>
</ul>

CSS

ul {
  list-style: none;
}

.icon-list li {
  text-indent: -1em;
}

.icon-list li::before {
  content: "\002013";
  left: -1em;
  position: relative;
}

.symbol-list li::before {
  content: "";
  border-color: transparent #111;
  border-style: solid;
  border-width: 0.35em 0 0.35em 0.45em;
  display: block;
  height: 0;
  width: 0;
  left: -1em;
  top: 0.9em;
  position: relative;
}

ul.dash li::before {
  display: inline-block;
  content: "-";
  width: 1em;
  margin-left: -1em;
}