Add a color in the <div> bottom content area - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Color

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Color

Description

Add a color in the <div> bottom content area

Demo Code

ResultView the demo in separate window 


<html>
 <head> 
  <style>

div{height:100px; width:100px; background:gold;position:relative;}
div:after{<!--from  w  ww.j a  v a  2  s . c  om-->
   content: '';
   position: absolute;
   height:50px;
   top:0;
   background:blue;
   width: 100px;
}
div:before{
   content: '';
   position: absolute;
   height:50px;
   bottom:0;
   background:green;
   width: 100px;
}

      </style> 
 </head> 
 <body> 
  <div></div>  
 </body>
</html>

Related Tutorials