SCSSでの記述になります。liの擬似クラスを利用してborderを表示させています。
ul { margin: 0; padding: 0; li { position: relative; margin: 0 0.5em; // border設定 &::after, &::before { background-color: rgba(255, 255, 255, 0.5); content: ''; display: block; position: absolute; z-index: 10; transition: all .2s ease; -webkit-transition: all .2s ease; bottom: -1px; height: 1px; width: 0px; } &::after { right: 50%; } &::before { left: 50%; } // hoverした時 &:hover { &::after, &::before { width: 50%; } } } }