HTML CSS examples for CSS Widget:Hover on list
Styling Pseudo Elements on hover
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .skills-tag {<!-- ww w .java2 s. c o m--> font-size:14px; margin-right:16px; padding:3.6px 11px; background:Chartreuse; color:yellow; text-decoration:none; -moz-border-radius-bottomleft:5px; -webkit-border-bottom-left-radius:5px; border-bottom-left-radius:5px; -moz-border-radius-topleft:5px; -webkit-border-top-left-radius:5px; border-top-left-radius:5px; } .skills-tag:after { margin-top:-3px; content:""; margin-left:10px; position:absolute; width:0; height:0; border-color:blue; border-style:solid; border-width:13px 0 13px 13px; } .skills-tag:hover { background:pink; } .skills-tag:hover:after { border-left-color:OrangeRed; } </style> </head> <body> <a href="#" class="skills-tag">Lorem</a> <a href="#" class="skills-tag">Lorem</a> <a href="#" class="skills-tag">Lorem</a> </body> </html>