HTML/CSS : tracer un trait

balise <hr>
Méthode longue mais mieux:

Cibler l’endroit où on veut placer le trait:

 <section id="section-form">
      <div class="container formulaire">
        <h2 class="line">HAVE A QUESTION? CONTACT US</h2>
        <form action="#">
          <div class="coordonnees d-flex">
            <div class="form-group">

ici le trait sera au dessus du <h2> , on lui attribue une classe « line »

Dans la feuille de style créer une bordure autour de cet élément:

/* ---------------- tracer un trait !!!!!------------ */

#section-form .line {
  position: relative;
  display: inline-flex;
}

#section-form .line::before {
  content: "";
  width: 100%;
  border-radius: 2px;
  border: 2px solid olivedrab;
  position: absolute;
  top: -20px;
}

::before -> cible l’espace avant la balise ciblée.
content: » » -> rempli l’espace défini avec du vide

La position: absolute se base sur l’élément en position relative le plus proche. Donc si notre .line n’est pas en position relative, le ::before va se positionner par rapport a la position du body.

top: -8px : top:0 correspond au plus haut à gauche . Donc il faut placer des chiffres négatifs pour monter la position.

display: inline-flex : pour que le <h2> ne prenne pas la largeur de la page

width:100% : le trait prend la largeur du <h2>

border-radius: arrondit l’extremité

Protocole similaire pour un trait en dessous:

#section-form .line::after {
  content: "";
  width: 100%;
  border-radius: 2px;
  border: 2px solid olivedrab;
  position: absolute;
  bottom: -20px;
}

RESULTAT:

#section-form .line {
  position: relative;
  display: inline-flex;
}

#section-form .line::before {
  content: "";
  width: 100%;
  border-radius: 2px;
  border: 2px solid olivedrab;
  position: absolute;
  top: -20px;
  opacity: 0;
  transition: all 0.5s;
}
#section-form .line:hover::before {
  opacity: 100%;
  top: -12px;
  transition: all 0.5s;
}

#section-form .line::after {
  content: "";
  width: 100%;
  border-radius: 2px;
  border: 2px solid olivedrab;
  position: absolute;
  bottom: -20px;
  opacity: 00%;
  transition: all 0.5s;
}

#section-form .line:hover::after {
  opacity: 100%;
  bottom: -10px;
  transition: all 0.5s;
}