Comment ajouter une partielle de la frontière à en-tête de titre?

Question

J'ai du ajouter un élégant la frontière dans le texte d'en-tête comme ceci:

mais je ne suis pas sûr de savoir comment faire.

J'ai essayé le code ci-dessous avec border-bottom , mais il ne semble pas bon.

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

<h1>Navigation</h1>

Answer 1

Vous pouvez utiliser un pseudo-élément positionné sur l' 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>

À l'aide d'un pseudo-élément comme cela le rend très facile d'ajouter de l'animation. Peut-être pour animer la frontière lors du survol d'une section de la 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

Avec un pseudo-élément et un dégradé linéaire

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>

Answer 3

Vous pouvez utiliser un dégradé de fond et de la taille

h1 {
  font-size:30px;
  color:#000;
  background:linear-gradient(to right, gold 8em, #ccc 8em) bottom left no-repeat;/* here start/stop color is et at 8em, use your own value and colors */
  background-size:100% 3px;/* here set thickness */
  padding-bottom:5px;
}

<h1>Navigation</h1>

Answer 4

Je l'ai pris un peu plus loin et fait le titre ressemble plus à l'image de référence. Je suis en utilisant la même image d'arrière-plan l'idée que le G-Cyr a fait dans sa réponse.
Notez les deux milieux. Le premier ensemble de valeurs en background et background-size attributs sont ce qui rend la ligne de fond; le deuxième est pour la couleur d'arrière-plan.

h1 {
  background: linear-gradient(to right, #E6831D 20%, #FFF 20%) bottom .5em left .8em no-repeat, linear-gradient(#323A45, #323A45);
  background-size: 100% 1px, 100% 100%;
  padding: .8em;
  color: #FDFFFE;
  font-size: 30px;
  font-family: sans-serif;
  font-weight: lighter;
}

<h1>Awesome Heading</h1>

Answer 5

L'une des façons de le faire serait d'ajouter h1::after avec la largeur requise et d'avoir une autre couleur de la bordure.

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

h1:after {
    display: block;
    border-bottom: 1px solid red;
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0px;
    width: 5em;
}

<h1>Navigation</h1>