Created
June 23, 2017 04:19
-
-
Save kggayo/d0a2be6f92257a2f8233fa8f1c7d895d to your computer and use it in GitHub Desktop.
Vertical spacing in text-decoration: underline using CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
Adjust vertical space by adjusting 71% | |
Adjust line thickness by adjusting 71% and 72% | |
*/ | |
a:hover { | |
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 71%, #FFFFFF 71.1%, #FFFFFF 72%, rgba(0,0,0,0) 72.1%, rgba(0,0,0,0) 100%); /* FF3.6+ */ | |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(71%,rgba(0,0,0,0)), color-stop(71.1%,#FFFFFF), color-stop(72%,#FFFFFF), color-stop(72.1%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */ | |
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 71%,#FFFFFF 71.1%,#FFFFFF 72%,rgba(0,0,0,0) 72.1%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */ | |
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 71%,#FFFFFF 71.1%,#FFFFFF 72%,rgba(0,0,0,0) 72.1%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */ | |
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 71%,#FFFFFF 71.1%,#FFFFFF 72%,rgba(0,0,0,0) 72.1%,rgba(0,0,0,0) 100%); /* IE10+ */ | |
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 71%,#FFFFFF 71.1%,#FFFFFF 72%,rgba(0,0,0,0) 72.1%,rgba(0,0,0,0) 100%); /* W3C */ | |
text-decoration: none; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment