Adding Horizontal line Below The Text - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Border

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

Description

Adding Horizontal line Below The Text

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <style type="text/css">
.about {<!--from   ww w.j av  a2s . com-->
   padding: 2em;
}
.container {
   margin: 0 auto;
   width: 60%;
   text-align: center;
}
.about:after { /* this is the border */
    content:"";
    display:block;
    width: 6em;
    max-width:70%;
    border-bottom: 0.3em solid red;
    margin: 2em auto 0;
}

      </style> 
   </head> 
   <body> 
      <section class="about"> 
         <div class="container"> 
            <h1 class="text-center">Introduction</h1> 
            <h3 class="text-center">this a test. this a test. this a test. this a test. this a test. </h3> 
         </div> 
      </section>  
   </body>
</html>

Related Tutorials