This question already has an answer here:
I have pseudo elements of a link that I use to create hover effect. I am trying to vertically align the text so that it appears on the center. If I remove the <br> before the text, the whole text moves on hover rather than staying fixed at its initial position.
.service-nav {
width: 400px
}
.service-nav ul li{
list-style: none;
}
.service-nav ul li span{
z-index: 1;
position: relative }
.service-nav a:hover {
height: 50px;
margin-left: 50px;
}
.service-nav a:after {
content: "";
position: absolute;
top: 6px;
bottom: 12px;
width: 7px;
background: #fc0;
-webkit-transition: all .8s;
transition: all .8s;
display: inline-block;
height: 50px;
margin-right: 50px;
left: 25px;
}
.service-nav a:before {
content: "";
position: absolute;
top: 6px;
bottom: 12px;
width: 10px;
background: #fc0;
-webkit-transition: all .8s;
transition: all .8s;
display: inline-block;
height: 50px;
margin-right: 50px;
left: 10px;
}
.service-nav li:before {
content: "";
position: absolute;
top: 6px;
bottom: 12px;
width: 3px;
background: #fc0;
-webkit-transition: all .8s;
transition: all .8s;
display: inline-block;
height: 50px;
margin-right: 50px;
left: 40px;
}
.service-nav :hover li:before, .service-nav a:hover:after, .service-nav a:hover:before {
left: calc(100% - (100% - 29px));
width: calc(100% - 89px);
}<div class="service-nav"><ul><li><a href="#"><br><span>Some Link</span></a></li></ul></div>