css: hover border

css: hover border

by Boba Poshtar

HTML

<ul class="v1">
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

<ul class="v2">
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>
<br><br>
<ul class="v3">
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

<ul class="v4">
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe vel ab neque quod quaerat eius unde laudantium sunt reiciendis consequuntur, dolor modi temporibus vitae ad aut provident at rem ipsam.</p>

CSS

ul { margin-bottom: 20px; padding: none; list-style: none; overflow: hidden;}
li { float: left; padding: 8px 16px; cursor: pointer; box-sizing: border-box;}

.v1 li:hover { border-bottom: 3px solid blue;}
.v2 li:hover { border: 3px solid blue;}

.v3 li { border-bottom: 3px solid transparent;}
.v4 li { border: 3px solid transparent;}
.v3 li:hover { border-bottom-color: blue;}
.v4 li:hover { border-color: blue;}