add chevrons to a ul list

add chevrons to a ul list Demo

View Demo Full Screen View Demo New Tab

add chevrons to a ul list Code

HTML

<h3>Chevron List Items</h3>
<ul class='chev-list mb-10'>
  <li>an item 1</li>
  <li>an item 2</li>
  <li>an item 3</li>
  <li>an item 4</li>
  <li>an item 5</li>
</ul>

<h3>Chevron Moving List Items</h3>
<p>These ones move as you mouse over them</p>
<ul class='chev-list chev-list-move mb-10'>
  <li>an item 1</li>
  <li>an item 2</li>
  <li>an item 3</li>
  <li>an item 4</li>
  <li>an item 5</li>
</ul>

CSS

/* get rid of the list style */
ul.chev-list {
	list-style:none;
}

/* set the position of the li elements to relative, so we can add a before item and it will stick to it */
ul.chev-list li {
	position:relative;
}

/* add the chevron to the before of the li element, set the chevron as a background */
ul.chev-list li::before {
  position: absolute;
  content: "";
  color: #FFF;
  top: 5px;
  left: -20px;
  transition: all 0.3s ease;
  background-image: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-chevron-right' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  height:16px;
  width:16px; 
}

ul.chev-list-move li:hover:before {
  position: absolute;
  content: "";
  color: #FFF;
  top: 5px;
  left: -15px;
  transition: all 0.3s ease;
  background-image: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-chevron-right' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  height:16px;
  width:16px; 
}