Highlight link targer

HTML
<section> Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, <a href="#">dignissim</a> sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. <a href="#">Maecenas</a> ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non <a href="#">fermentum</a> diam nisl sit amet erat. Duis semper. Duis arcu massa, <a href="#">scelerisque vitae</a>, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum <a href="#">bibendum</a> augue. Praesent egestas leo in pede. Praesent <a href="#">blandit</a> odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante <a href="#">ipsum</a> primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. <a href="#">Mauris</a> ac mauris sed pede pellentesque fermentum. Maecenas <a href="#">adipiscing</a> ante non diam sodales hendrerit. </section>
CSS
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { min-height: 100vh; margin: 0; padding: 0; font-family: sans-serif; color: #999; } section { padding: 5% 0; margin: 0 auto; max-width: 650px; font-size: 20px; line-height: 1.5em; position: relative; } a { text-decoration: none; color: #333; } .highlight { border-bottom: 2px solid #00ff00; position: absolute; top: 0; background: rgba(0, 255, 0, 0.3); left: 0; z-index: -1; display: block; transition: all 0.2s ease; }
JAVASCRIPT
var link = document.querySelectorAll('a'); var highlight = document.createElement('span'); highlight.classList.add('highlight'); document.body.append(highlight); function highlightLink() { var linkCoords = this.getBoundingClientRect(); var coords = { width: linkCoords.width, height: linkCoords.height, top: linkCoords.top + window.scrollY, left: linkCoords.left + window.scrollX }; highlight.style.width = `${coords.width}px`; highlight.style.height = `${coords.height}px`; highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`; } link.forEach(a => a.addEventListener('mouseenter', highlightLink));
Expand for more options Login