Place span on each side of an H3 tag - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Relative Position

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Relative Position

Description

Place span on each side of an H3 tag

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

div{<!--from  w w  w.  jav  a  2s  .  c  o  m-->
   position: relative;
}
h3{
   padding: 0 30px;
}
span{
   position: absolute;
   top: 0;
}
span:last-child{
   right: 0;
}


      </style> 
 </head> 
 <body> 
  <div> 
   <span class="glyphicon glyphicon-chevron-left">icon</span> 
   <h3>Title this is a test tehis is a a test this is a test</h3> 
   <span class="glyphicon glyphicon-chevron-right">icon</span> 
  </div>  
 </body>
</html>

Related Tutorials