how to underline text in css

h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}

h4 {
  text-decoration: underline overline;
}

h3 {
  text-decoration: underline;
}

style="text-decoration: line-through;"

x {
  text-decoration: line-through;
}

/* Using 'text-decoration' property with 'underline' value. we can draw underline below the text using css */
<style>
p {
  text-decoration: underline;
}
</style>
<p>Hello all Welcome here !!!</p>

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}

<!-- Using 'u' tag we can draw underline below the text in HTML -->
<p>Hello all <u>Welcome here !!!</u></p>

    .underline {
       text-decoration: none; 
       position: relative; 
     }   

    .underline:after {
        position: absolute;
        content: '';
        height: 2px;
		  /* adjust this to move up and down. you may have to adjust the line height of the paragraph if you move it down a lot. */
        bottom: -4px; 


       /****** 
       optional values below 
       ******/
        
        /* center - (optional) use with adjusting width   */
        margin: 0 auto;
		  left: 0;
        right: 0;
		  width: 50%;
		  background: green;
		  
		  /* optional animation */
		  -o-transition:.5s;
  		  -ms-transition:.5s;
        -moz-transition:.5s;
        -webkit-transition:.5s;
        transition:.5s;
    }
	 

	 /* optional hover classes used with anmiation */
	  .underline:hover:after {
		  width: 80%;
		  background: orange;
    }