HTML CSS examples for CSS Widget:Link
adding text under a link icon
<html> <head> <style type="text/css"> a[title] { position: relative; margin-bottom: 1em; width: 100px; height: 100px; display: block; background-image: url('http://java2s.com/resources/k.png'); border: 1px solid red; margin-bottom: 1em; } a[title="Email"] { background-image: url('https://www.java2s.com/style/demo/Opera.png'); } a[title="SomethingElse"] { background-image: url('https://www.java2s.com/style/demo/Google-Chrome.png'); } a[title]:after { content: attr(title); position: absolute; top: 100px; display: block; text-align: center; width: 100%; left: 0; } </style> </head> <body> <a title="Email" class="icon-envelope" href="#">test</a> <a title="title message" class="icon-envelope" href="#"></a> <a title="SomethingElse" class="icon-envelope" href="#"></a> </body><!-- w w w.ja v a 2s. com--> </html>