I have a ul in my HTML with lis that contain navigation options such as home, contact, about, etc. I am trying to figure out the best way to add a unique effect to each button since they all have different content and require different icons. Essentially, I want to create a hover effect that changes the position of the text and icon for each button. Is there a way to do this in a more efficient and DRY (Don't Repeat Yourself) manner?
For example, instead of using
If you want to see the code in action, here is a codepen link:
https://codepen.io/anon/pen/MqzVQe
.menu a{
display:block;
color:white;
background-color: #0099ff;
padding: 10px;
text-decoration:none;
text-align: center;
height: 40px;
border-radius: 5px;
text-transform: uppercase;
font-family: 'Raleway', sans-serif;
font-weight: lighter;
letter-spacing: 1;
position: relative;
overflow: hidden;
}
.menu a::before{
content: '\f015';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
top:-30px;
position: absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
color:black;
transition: all .2s ease-in-out;
}
.menu a:hover::before{
top: -20px;
}
.menu a::after{
content: 'Home';
position:absolute;
display:block;
top:calc(100% + 20px);
left:50%;
transform: translate(-50%, -50%);
transition: all .2s ease-in-out;
}
.menu a:hover::after{
top:50%;
}