Highlight Hover Text Links

HTML
<div class="container"> <h1>Header<span>One</span></h1> <p>Hello, this is where you insert your paragraph text and <a href="#" class="intext-link">in text links</a> that are highlighted on hover. Insert more text dfdfsdfdjkhdfbdslfb. <a href="#" class="another-link">Another Link</a> and <a class="yay-link" href="#">Yay for links</a></p> <a href=""><svg xmlns="http://www.w3.org/2000/svg" width="54" height="54" viewBox="0 0 54 54" class="tw_icon"><defs><style>.a{fill:#66cc99;}.b{fill:#000000;}</style></defs><g transform="translate(-423 -4122)"><circle class="a" cx="27" cy="27" r="27" transform="translate(423 4122)"/><g transform="translate(438.537 4091.812)"><g transform="translate(0 48)"><path class="b" d="M19.856,49.91a8.487,8.487,0,0,1-2.345.643A4.048,4.048,0,0,0,19.3,48.3a8.134,8.134,0,0,1-2.581.985,4.07,4.07,0,0,0-7.041,2.784A4.191,4.191,0,0,0,9.773,53a11.522,11.522,0,0,1-8.39-4.258,4.072,4.072,0,0,0,1.251,5.44,4.02,4.02,0,0,1-1.839-.5v.045a4.089,4.089,0,0,0,3.261,4,4.062,4.062,0,0,1-1.067.134,3.6,3.6,0,0,1-.771-.069,4.109,4.109,0,0,0,3.8,2.836A8.179,8.179,0,0,1,.974,62.362,7.624,7.624,0,0,1,0,62.306a11.46,11.46,0,0,0,6.245,1.827A11.506,11.506,0,0,0,17.83,52.549c0-.18-.006-.354-.015-.526A8.12,8.12,0,0,0,19.856,49.91Z" transform="translate(1.463 -46.811)"/></g></g></g></svg></a> </div>
CSS
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700'); @import url('https://fonts.googleapis.com/css?family=Vollkorn'); *::selection{ background: #FFD138; color: white; } .container{ margin: 80px; width: 400px; } p{ line-height:1.8em; color: #A2A3A6} body{ font-family: open sans; background: #F5F6FA; } h1{ font-family: vollkorn; color: rgba(0,0,0,0.8); font-weight: 400; } h1 span{ color: #cc6699; } /*hover animation on links*/ a{ text-decoration: none; color: black; display: inline-block; } a:before{ content:""; display: block; position: absolute; height: 12px; background-color: #EDEEF2; z-index: -10; transform: translateY(3px); } a:after{ content:""; display: block; position: absolute; width: 0px; height: 12px; background-color: #66cc99; z-index: -8; transition: all 0.3s ease-out; transform: translateY(-25px); } .intext-link:before{ width: 75px; } .intext-link:hover:after{ width: 75px; } .another-link:before{ width: 85px; } .another-link:hover:after{ width: 85px; } .yay-link:before{ width: 80px; } .yay-link:hover:after{ width: 80px; } .tw_icon{ margin-top: 30px; transition: all .4s ease-out; } .tw_icon:hover .a{fill:#cc6699;} .tw_icon:hover{ transform: scale(1.2); } @media screen and (max-width: 700px){ a:before{ background-color: #FFD138; } .tw_icon .a{fill:#FFD138;} .container{ width: 80%; } }
JAVASCRIPT
Expand for more options Login