<ul class="header_nav_list flex_box flex_between">
<li class="button"><a href="#">HOME</a></li>
<li><a href="#">BUSINESS</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">PROCLAMATION</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">WEB事業部サイト</a></li>
</ul>
.header_nav_list li:hover {
color: #fff;
}
.header_nav_list li::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
content: "";
background: #333;
transform-origin: right top;
transform: scale(0, 1);
transition: transform 0.3s;
}
.header_nav_list li:hover::before {
transform-origin: left top;
transform: scale(1, 1);
}
.header_nav_list li a {
padding: 10px;
}