How to add a partial border to header title? [duplicate]

Question

I have to add a stylish border in the header text like this:

but I'm not sure how to do it.

I tried the below code with border-bottom but it does not look good.

h1 {    font-size:30px;    color:#000;    border-bottom: 1px solid #ccc;    padding-bottom:5px;  }

<h1>Navigation</h1>

Answer 1

You could use a pseudo element positioned over the border-bottom:

h1 {    font-size: 30px;    color: #000;    border-bottom: 1px solid #ccc;    padding-bottom: 5px;  }    h1::after {    content: "";    display: block;    border-bottom: 1px solid orange;    width: 25%;    position: relative;    bottom: -6px; /* your padding + border-width */  }

<h1>Navigation</h1>

Using a pseudo element like this makes it very easy to add animation. Perhaps to animate the border when hovering over a section of the page:

h1 {    font-size: 30px;    color: #000;    border-bottom: 2px solid #ccc;    padding-bottom: 5px;  }    h1::after {    content: "";    display: block;    border-bottom: 2px solid orange;    width: 0;    position: relative;    bottom: -7px; /* your padding + border-width */    transition: width .6s ease;  }    .section:hover h1::after {    width: 25%;  }

<div class="section">    <h1>Navigation</h1>      <p>    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet accumsan odio, sit amet molestie tortor ultricies vel. Donec nibh purus, fermentum eget dolor ac, tincidunt scelerisque urna. Ut gravida id eros sed placerat. Etiam vel mi erat. Etiam rhoncus massa ultricies quam malesuada pretium. Fusce elementum diam in turpis rutrum auctor. Vestibulum venenatis bibendum euismod. Praesent ex justo, blandit non urna et, porta interdum enim.    </p>  </div>

Answer 2

With a pseudo-element and a linear-gradient

h1 {    font-size: 30px;    color: #000;    position: relative;  }    h1::after {    content: "";    position: absolute;    left: 0;    width: 100%;    height: 2px;    bottom: 0;    margin-bottom: -.5em;    background: linear-gradient(to right, gold 15%, grey 15%, grey);  }

<h1>Navigation</h1>