How can custom underline to a text

Here's one more solution:

h1{
    color: #F16A70;
    text-transform: uppercase;
    display: inline-block;
    font-size: 30;
    font-family: oswald;
    text-decoration: none;
    background-image: linear-gradient(to right, #F16A70, #F16A70);
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: 50% 2px;
    transition: background-size .5s ease;
}
h1:hover {
    background-size: 100% 2px;
}
<div>
<h1>navigation</h1>
</div>

Animation of :after pseudo-element - to get it visible you need to set position attribute for both h1 and h1:after:

h1 {
    color: #F16A70;
    position: relative;
    text-transform: uppercase;
    display: inline-block;
    font-size: 30;
    font-family: oswald;
    text-decoration: none;
}
h1:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 0;
    width: 30%;
    border-bottom: 2px solid #F16A70;
    transition: width 0.3s ease;
}
h1:hover:after {
    width: 100%;
}
<div>
<h1>navigation</h1>
</div>


Try to this:

.navigation-heading h1{
  display:inline-block;
            color: #F16A70;
            text-transform: uppercase;
            font-size: 30px;
            font-family: 'oswald';
  position:relative;
        }

h1:after{
  content:'';
  position:absolute;
  top:100%;
  left:0;
  width:65%;
  border-bottom: 2px solid #F16A70;
  }
<div class="navigation-heading">
<h1>navigation</h1>
</div>


You can do it with css3 linear-gradient().

Steps:

  1. Create background image with linear-gradient().
  2. Adjust its size with css background-size property.
  3. Place it at the bottom left position of the element with background-position css property.

Necessary CSS:

h1 {
  background: linear-gradient(to right, #F16A70, #F16A70) no-repeat;
  background-size: 60% 3px;
  background-position: left bottom;
}


h1 {
  background: linear-gradient(to right, #F16A70, #F16A70) no-repeat;
  background-size: 60% 3px;
  background-position: left bottom;
  color: #F16A70;
  text-transform: uppercase;
  font-size: 30px;
  font-family: oswald, sans-serif;
  display: inline-block;
  vertical-align: top;
  padding-bottom: 10px;
}
<h1>Navigation</h1>

Tags:

Css

Recent Posts