<nav class="contentNavi--type004">
  <ul>
    <li><a href="#">コンテンツメニュー名</a></li>
    <li><a href="#">コンテンツメニュー名</a></li>
    <li><a href="#">コンテンツメニュー名</a></li>
    <li><a href="#">コンテンツメニュー名</a></li>
  </ul>
</nav>
                

.contentNavi--type004{
  display:block;
  >ul{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:0 0.3em;
    position:relative;
    z-index: 1;
    >li{
      margin-bottom:0.3em;
      display:block;
      a{
        display:block;
        position:relative;
        color:#000;
        padding:0.5em 1em 0.5em 2em;
        line-height:1.5;
        background:#EEE;
        border-top:#DDD solid 1px;
        &::before{
          content:"";
          display:block;
          width:0.8em;
          height:0.8em;
          background:#000;
          border-radius:50%;
          position:absolute;
          top:calc(50% - 0.4em);
          left:0.8em;
          transition:top 0.3s ease;
        }
        &::after{
          content:"";
          display:block;
          width:0.3em;
          height:0.3em;
          border-right:0.15em solid #FFF;
          border-bottom:0.15em solid #FFF;
          transform:rotate(45deg);
          position:absolute;
          top:calc(50% - 0.2em);
          left:1.05em;
          transition:top 0.3s ease;
        }
        &:hover{
          color:#666;
          background:#DDD;
          &::before{
            top:calc(50% - 0.1em);
          }
          &::after{
            top:calc(50% + 0.1em);
          }
        }
      }
    }
  }
}