I'm trying to add a link to each "card" but whenever I add the anchor element, my text inside the card doesn't match the card's color when it's not hovered. The 1st card has an anchor and you can see the color turns blue while the card is supposed to be aqua. The other cards don't have an anchor but will need one as well...
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Fira Sans Light";
}
body {
display: grid;
place-items: center;
min-height: 100vh;
background-color: #f5f5f5;
}
ul {
width: clamp(250px, 95vw, 350px);
}
li {
list-style-type: none;
background-color: #fff;
box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.2);
margin: 1rem 0;
padding: 1rem 2rem;
border-radius: 0.3rem;
display: flex;
align-items: center;
position: relative;
z-index: 1;
overflow: hidden;
}
span {
font-size: 1.3rem;
font-weight: 500;
transition: 200ms ease-in-out color;
}
i {
font-size: 2rem;
margin-right: 1.5rem;
transition: 200ms ease-in-out color;
}
li::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
transform: scaleX(0.015);
transform-origin: left;
transition: 200ms ease-in-out transform;
}
li:hover::before {
transform: scale(1);
}
li:hover * {
color: #fff;
}
/* Bar Color before and after the hover effect */
li:first-of-type::before {
background-color: #00a1a1;
}
li:nth-of-type(2)::before {
background-color: #8a2be2;
}
li:nth-of-type(3)::before {
background-color: #093d86;
}
li:nth-of-type(4)::before {
background-color: #6a6d74;
}
li:nth-of-type(5)::before {
background-color: #241773;
}
li:last-of-type::before {
background-color: #f08800;
}
/* Color of the content inside each card */
li:first-of-type {
color: #00a1a1;
}
li:nth-of-type(2) {
color: #8a2be2;
}
li:nth-of-type(3) {
color: #093d86;
}
li:nth-of-type(4) {
color: #6a6d74;
}
li:nth-of-type(5) {
color: #241773;
}
li:last-of-type {
color: #f08800;
}
a:link {
color: none;
text-decoration: none;
}
a:visited {
/* color: #777; */
color: none;
}
a:active {
text-decoration: none;
}<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style2.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
/>
<body>
<div class="container1">
<ul>
<li>
<i class="fa-solid fa-money-check-dollar"></i>
<a href="#">
<span>OpEx</span>
</li></a>
<li>
<i class="fa-solid fa-computer"></i>
<span>Layout Management</span>
</li>
<li>
<i class="fa-solid fa-elevator"></i>
<span>Capacity & Demand</span>
</li>
<li>
<i class="fa-solid fa-code-compare"></i>
<span>Change Management</span>
</li>
<li>
<i class="fa-solid fa-calendar-week"></i>
<span>Scheduling</span>
</li>
<li>
<i class="fa-solid fa-ranking-star"></i>
<span>KPIs</span>
</li>
</ul>
</div>
</body>
</html>