Give border bottom to heading with font awesome icon - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Font awesome

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Font awesome

Description

Give border bottom to heading with font awesome icon

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">
.container-1 {<!--from w w  w  . ja va2s . c  o  m-->
   height:100px;
   display:inline-block;
   overflow:hidden;
}

.container-1>.widget_title_1 {
   font-size:26pt;
   margin:0;
   display:inline-block;
   position:relative;
}

.container-1>.fa {
   font-size:25px;
   display:block;
   height:31px;
   text-align:center;
}

.container-1>.widget_title_1:before {
   content:"";
   position:absolute;
   width:51%;
   height:3px;
   background:Chartreuse;
   bottom:-39%;
   left:0;
   margin-left:-11px;
}

.container-1>.widget_title_1:after {
   content:"";
   position:absolute;
   width:51%;
   height:3px;
   background:yellow;
   bottom:-39%;
   margin-right:-11px;
   right:0;
}

.container {
   background-image:url('https://www.java3s.com/style/demo/Google-Chrome.png');
   background-size:cover;
   background-position:51%;
   height:100px;
   overflow:hidden;
}

.container>.widget_title {
   font-size:26pt;
   margin:0;
   display:inline-block;
   position:relative;
}

.container>.fa {
   font-size:25px;
   display:block;
   height:31px;
   width:139px;
   text-align:center;
}

.container>.widget_title:before {
   content:"";
   position:absolute;
   width:51%;
   height:3px;
   background:blue;
   bottom:-39%;
   left:0;
   margin-left:-11px;
}

.container>.widget_title:after {
   content:"";
   position:absolute;
   width:51%;
   height:3px;
   background:pink;
   bottom:-39%;
   margin-right:-11px;
   right:0;
}
</style> 
 </head> 
 <body> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
  <div class="container-1"> 
   <h1 class="widget_title_1">Lorem ipsum</h1> 
   <i class="fa fa-angle-down"></i> 
  </div> 
  <div class="container"> 
   <h1 class="widget_title">Lorem ipsum</h1> 
   <i class="fa fa-angle-down"></i> 
  </div>  
 </body>
</html>

Related Tutorials