adding text under a link icon - HTML CSS CSS Selector

HTML CSS examples for CSS Selector:after

  1. HOME
  2. HTML CSS
  3. CSS Selector
  4. after

Description

adding text under a link icon

Demo Code

ResultView the demo in separate window 

<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. j av a 2  s  .  c om-->
</html>

Related Tutorials