you have to specify the height property for a tag.
a {
height:100px; /* add this line */
margin: 20px;
text-decoration: none;
color: rgb(32, 32, 32);
font-size: 21px;
vertical-align: baseline;
transition: 3s ease-in-out all;
position: relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.links {
margin-top: 2rem;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid red;
padding: 20px 70px;
justify-content: space-evenly;
height: 180px;
transition: all 3s ease-in-out all;
}
a {
height:100px;
margin: 20px;
text-decoration: none;
color: rgb(32, 32, 32);
font-size: 21px;
vertical-align: baseline;
transition: 3s ease-in-out all;
position: relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
a:hover .learnMore {
display: block;
}
/* *this is the hidden part* */
.learnMore {
display: none;
transition: 3s ease-in-out all;
}
/* **__this part needs to be pushed down on hover __** */
.dots {
color: rgb(30, 140, 184);
font-size: 2.3rem;
font-family: soleil, Helvetica, Arial, sans-serif;
transform: translateY(-15px);
}
/*>I dont wanna use opacity**/<div class="links">
<a href="">Digital Marketing <div class="learnMore">Learn More</div><div class="dots">...</div></a>
<a href="">Security Solutions<div class="learnMore">Learn More</div> <div class="dots">...</div></a>
<a href="">Healthcare Technology<div class="learnMore">Learn More</div> <div class="dots">...</div></a>
<a href="">Business Process Automation<div class="learnMore">Learn More</div> <div class="dots">...</div></a>
</div>