純CSS導航欄下劃線跟隨效果

<ul>
  <li>難以想象的CSS</li>
  <li>導航欄</li>
  <li>光標小下劃線跟隨</li>
  <li>PURE CSS</li>
  <li>Nav Underline</li>
</ul>

li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 0;
    height: 100%;
    border-bottom: 2px solid #000;
    transition: 0.2s all linear;
}

li:hover::before {
    width: 100%;
    left: 0;
}

li:hover ~ li::before {
    left: 0;
}

關鍵

element1~element2

p~ul

選擇前面有 <p> 元素的每一個 <ul> 元素。

css3