HTML CSS examples for CSS Widget:Hover
Pseudo elements hover
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .facebook:before {<!--from w w w . j av a2 s .c o m--> content:url('https://www.java2s.com/style/demo/Google-Chrome.png'); padding-right:11px; position:relative; bottom:-.5em; } .facebook:hover:before { content:url('https://www.java2s.com/style/demo/Google-Chrome.png'); padding-right:11px; position:relative; bottom:-.5em; } .facebook a:hover { color:Chartreuse; } .twitter:before { content:url('https://www.java2s.com/style/demo/Google-Chrome.png'); padding-right:11px; position:relative; bottom:-.5em; } .youtube:before { content:url('https://www.java2s.com/style/demo/Google-Chrome.png'); padding-right:11px; position:relative; bottom:-.5em; } #midlist { width:709px; list-style-type:none; margin:0 auto; } #midlist li { float:left; width:113px; height:11px; line-height:0px; } #header2 { margin-top:3px; margin-bottom:6px; background-color:yellow; padding:22px; padding-bottom:52px; } </style> </head> <body> <div> <header id="header2"> <ul id="midlist"> <li class="twitter"> <a href="www.twitter.com">Lorem i</a> </li> <li class="facebook"> <a href="www.twitter.com">Lorem ip</a> </li> <li class="youtube"> <a href="www.twitter.com">Lorem i</a> </li> </ul> </header> </div> </body> </html>