CSS导航栏下划线跟随效果

效果图

<!DOCTYPE html>
<html lang="en"head>
  meta charset="UTF-8"name="viewport" content="width=device-width,initial-scale=1.0"title>index</style>
    ul {
      display: flex;
      width 800px
      list-style none;
    }

    li 
      position relative
      padding 20px
      transition .2s all linear
      cursor pointer

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

    li:hover::before 
        transition-delay .1s

    li:hover ~ li::before }

  bodyul>
    li>不可思议的CSS>导航栏>光标小下划线跟随>PURE CSS>Nav Underline>cyy demohtml>

CSS导航栏下划线跟随效果

相关文章