I am trying to increase the hit area of the link in the menu but doing so also increases the underline effect of the text. I have tried padding and width but no imrprovement. I want a effect just like the one present in highfive mobile menu(Underline from left). Here is the fiddle and Here is the code
.hvr-underline-from-left {
text-decoration:none;
padding: 3px 0;
color: #000;
cursor: pointer;
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
}
.hvr-underline-from-left:before {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 100%;
bottom : 7px;
background: #E13F3F;
height: 2px;
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-underline-from-left:hover:before, .hvr-underline-from-left:focus:before, .hvr-underline-from-left:active:before {
right: 0;
}
<html>
<body>
<a class="hvr-underline-from-left" href="#">About </a>
</body>
</html>
You could add a span
within the a
-tag and put the underline effect on the span instead.
This way you can add padding to your link element without it affecting the underline effect.
a {
padding: 20px;
display: inline-block;
background: #eee;
}
.hvr-underline-from-left {
text-decoration: none;
padding: 3px 0;
color: #000;
cursor: pointer;
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
}
.hvr-underline-from-left:before {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 100%;
bottom: 7px;
background: #E13F3F;
height: 2px;
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
a:hover .hvr-underline-from-left:before,
.hvr-underline-from-left:focus:before,
.hvr-underline-from-left:active:before {
right: 0;
}
<html>
<body>
<a href="#"><span class="hvr-underline-from-left">About</span></a>
</body>
</html>