cool underline style in css code example

Example 1: css underline color

u
{
	text-decoration: underline;
  	text-decoration-color: red;
}
example of use: (in html)

<p>The word <u>CAT</u>, is underlined </p>

Example 2: how to underline text in css

text-decoration: underline;

Example 3: add expanding underline on page load css

#sec {
  display: inline-block;
  position: relative;
  padding-bottom: 3px;
}
#sec:after {
  content: '';
  display: block;
  margin: auto;
  height: 3px;
  width: 0px;
  background: transparent;
  transition: width .5s ease, background-color .5s ease;
}
#sec:hover:after {
  width: 100%;
  background: blue;
}

Example 4: how to make underline hover effect in css

how to make underline hover effect in css