Set link icon by its title text with attribute selector - HTML CSS CSS Property

HTML CSS examples for CSS Property:content

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. content

Description

Set link icon by its title text with attribute selector

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><!--from ww w. j  a  v a  2s  .co m-->
</html>

Related Tutorials