這是目前我認為最簡單的方法，最下方可以看到Example，特別加上一點特效
HTML
<ul class="v-effect-link">
<li><a href="#">About</a></li>
<li><a href="#">service</a></li>
<li><a href="#">product</a></li>
<li><a href="#">Contacts</a></li>
</ul>CSS
.v-effect-link {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
.v-effect-link li {
display: inline-block;
min-width: 5em;
margin: 0 0.5em;
}
.v-effect-link a {
text-decoration: none;
display: block;
font-family:Arial;
position: relative;
color: black;
padding:.5em 0
}
.v-effect-link a:hover {
color: #c69f73;
}
.v-effect-link a:hover:before {
left: 0;
width: 100%;
}
.v-effect-link a:before {
content: "";
position: absolute;
width: 0;
height: .5px;
background-color: #c69f73;
bottom: calc(-1px);
right: 0;
transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
See the Pen CSS ul li horizontal align center by VECTOR.cool 威得數位 (@ann71727) on CodePen.
