Text with multiple underlines using CSS

Published on Author Code Father

Text with multiple underlines using CSS. To play with after and before pseudo elements, too. Not sure how many lines you need, but you can also add few more, this way

CSS:

CSS:
p {
  font-family:tahoma;
   font-size:16px;}


span {

  border-bottom:1px solid blue;
  position:relative;
  display:inline-block;}
 

span:before {
  content:'';
  position:absolute;
  left:0;
  bottom:-3px;
  border-bottom:1px solid red;
  display:block;
  width:100%;}
  

span:after {
  content:'';
  position:absolute;
  left:0;
 bottom:-5px;
  border-bottom:1px solid green;
  display:block;
  width:100%;}
  

HTML:
<p> non-decorated text <span>decorated text</span> non-decorated <span>decorated text</span> 
not decorated </p>


Comments

comments