JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<h1>
  Highlight list item on hover
</h1>
<h2>
With left border (flickering)
</h2>
<ul class="hover-list border margin-bottom-lg">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
  <li>List item 5</li>
  <li>List item 6</li>
  <li>List item 7</li>
  <li>List item 8</li>
  <li>List item 9</li>
  <li>List item 10</li>
</ul>
<h2>
With :before pseudo element (non-flickering)
</h2>
<ul class="hover-list pseudo-element">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
  <li>List item 5</li>
  <li>List item 6</li>
  <li>List item 7</li>
  <li>List item 8</li>
  <li>List item 9</li>
  <li>List item 10</li>
</ul>

CSS

body {
  font-family: sans-serif;
  font-size: 16px;
  padding: 2rem;
}
.margin-bottom-lg {
  margin-bottom: 4rem;
}
.hover-list {
  list-style-type: none;
  margin: inherit 0;
  padding: 0;
  border-top: 1px solid lightgray;
}
.hover-list > li {
  padding: .6rem 1rem;
  border-bottom: 1px solid lightgray;
}
.hover-list.border > li:hover {
  border-left: 4px solid dodgerblue;
}
.hover-list.pseudo-element > li:hover {
  position: relative; /* context for :before's position absolute */
}
.hover-list.pseudo-element > li:hover:before {
  content: "";
  width: 4px; 
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: 0;
  background-color: dodgerblue;
}