List items

Simple list item with icon

by Vishnuprasad ps

HTML

<div class="list-item">
  <ul>
    <li>
      <a href="#">
        <svg aria-hidden="true" class="icon" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
          <path d="M256 8c137 0 248 111 248 248S393 504 256 504 8 393 8 256 119 8 256 8zM140 300h116v70.9c0 10.7 13 16.1 20.5 8.5l114.3-114.9c4.7-4.7 4.7-12.2 0-16.9l-114.3-115c-7.6-7.6-20.5-2.2-20.5 8.5V212H140c-6.6 0-12 5.4-12 12v64c0 6.6 5.4 12 12 12z"></path>
        </svg>
        List Item 1 (with link)
      </a>
    </li>
    <li>
      <svg aria-hidden="true" class="icon" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
        <path d="M256 8c137 0 248 111 248 248S393 504 256 504 8 393 8 256 119 8 256 8zM140 300h116v70.9c0 10.7 13 16.1 20.5 8.5l114.3-114.9c4.7-4.7 4.7-12.2 0-16.9l-114.3-115c-7.6-7.6-20.5-2.2-20.5 8.5V212H140c-6.6 0-12 5.4-12 12v64c0 6.6 5.4 12 12 12z"></path>
      </svg>
      List Item 2
    </li>
    <li>
      <svg aria-hidden="true" class="icon" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
        <path d="M256 8c137 0 248 111 248 248S393 504 256 504 8 393 8 256 119 8 256 8zM140 300h116v70.9c0 10.7 13 16.1 20.5 8.5l114.3-114.9c4.7-4.7 4.7-12.2 0-16.9l-114.3-115c-7.6-7.6-20.5-2.2-20.5 8.5V212H140c-6.6 0-12 5.4-12 12v64c0 6.6 5.4 12 12 12z"></path>
      </svg>
      List Item 3
    </li>
    <li>
      <svg aria-hidden="true" class="icon" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
        <path d="M256 8c137 0 248 111 248 248S393 504 256 504 8 393 8 256 119 8 256 8zM140 300h116v70.9c0 10.7 13 16.1 20.5 8.5l114.3-114.9c4.7-4.7 4.7-12.2 0-16.9l-114.3-115c-7.6-7.6-20.5-2.2-20.5 8.5V212H140c-6.6 0-12 5.4-12 12v64c0 6.6 5.4 12 12 12z"></path>
      </svg>
      List Item 4
    </li>
  </ul>
</div>

CSS

.list-item {
  background: #f2f2f2;
  padding: 16px;
}

.list-item ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.list-item ul li {
  display: flex;
  align-items: center;
  font-size: 18px;
  border-bottom: 1px solid #585858;
  padding: 8px 0;
  transition: all 0.2s ease-in-out;
}

.list-item ul li:last-child {
  border-bottom: 0;
}

.list-item ul li a {
  display: contents;
  color: inherit;
  text-decoration: none;
}

.list-item ul li .icon {
  width: 18px;
  height: 18px;
  margin-right: 12px;
  transition: all 0.2s ease-in-out;
}

.list-item ul li:hover {
  color: #ffffff;
  background: #2a55a2;
  padding-left: 10px;
}

.list-item ul li:hover .icon {
  fill: #ffffff;
}