<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Text hover effects with less</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,600,800,300'><link rel="stylesheet" href="./style.css"> </head> <body> <section class="apresenteichan"> <a href="" data-bf="10 stylish" data-af="with less"> hover effects </a> </section> <section class="p1"> <a href="#" data-cont="coming">COMING</a> </section> <section class="p2"> <a href="#" data-cont="PIANO">PIANO</a> </section> <section class="p3"> <a href="#" data-cont="BURN">BURN</a> </section> <section class="p4"> <a href="#" data-cont="movement" >movement</a> </section> <section class="p5"> <a href="#" >comet</a> </section> <section class="p6"> <a href="#">TROPICALIA</a> </section> <section class="p7"> <a href="#">BRIDGE</a> </section> <section class="p8"> <a href="#" data-cont="wrecked"> wrecked <div class="line"></div> </a> </section> <section class="p9"> <a href="#"> BEAT <div class="i"></div> <div class="k"></div> </a> </section> </body> </html>