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

HTML CSS examples for CSS Selector:attribute equals value

  1. HOME
  2. HTML CSS
  3. CSS Selector
  4. attribute equals value

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

Related Tutorials