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

Question

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>

Leave a Comment Cancel reply