Animated underline Page list

Hello everyone
How can I adapt these codes to my blogger Page list?
Thank you

<ul class="nav">
  <li><a href="#">Nav item 1</a></li>
  <li><a href="#">Nav item 2</a></li>
</ul>

.nav {
  list-style: none;
  padding: 0;
  
  & > li {
    display: inline-block;
    
    & ~ li {
      margin-left: 1em;
    }
  }
  
  a {
    color: #666;
    text-decoration: none;
    // For this to work, remove margin: 0 auto from &:after
    direction: ltr; // [ltr | rtl]
    
    &:focus,
    &:hover {
      color: #CF000F;
      
      &:after {
        opacity: 1;
        width: 100%;
      }
    }
    
    &:after {
      margin: 0 auto;
      content: '';
      display: block;
      border-top: 1px solid;
      border-top-color: inherit;
      width: 0%;
      opacity: 0;
      transition: .25s;
    }
  }
}

-- 
You received this message because you are subscribed to the Google Groups "Blogger Developer Group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/bloggerdev.
For more options, visit https://groups.google.com/d/optout.