Comment créer : ligne de séparation de texte

Comment créer une ligne de séparation de texte réactive

Première étape - Ajoutez HTML :

<div class="divider">Lorem Ipsum</div>

Deuxième étape - Ajoutez CSS :

.divider {
  font-size: 30px;
  display: flex;
  align-items: center;
}
.divider::before, .divider::after {
  flex: 1;
  content: '';
  padding: 3px;
  background-color: red;
  margin: 5px;
}

Essayez-le vous-même

Explication de l'exemple :

Cet exemple vous montre comment créer une ligne de séparation de texte en utilisant CSS. En particulier, il utilise la combinaison de HTML et CSS pour réaliser cet effet.

Tout d'abord, vous devez ajouter un élément <div> avec le nom de classe "divider" dans HTML et y placer le texte que vous souhaitez afficher (dans cet exemple, le texte est "Lorem Ipsum").

Ensuite, dans le CSS, vous avez configuré .divider Les classes ont défini certains styles. Vous avez configuré la taille de la police à 30 pixels, utilisé le布局 flex, et configuré align-items: center; pour centrer verticalement le texte dans la ligne de séparation.

Ensuite, vous avez utilisé les éléments pseudo ::before et ::after pour ajouter des ornements aux deux côtés de la ligne de séparation. Ces deux éléments pseudo ont été configurés flex: 1 pour qu'ils occupent .divider Tous les espaces de l'élément, à l'exception du texte. Vous avez également configuré content: '' Pour vous assurer que ces deux éléments pseudo sont vides et ne contiennent aucun contenu.

Ensuite, configurez les marges internes, la couleur de fond et les marges extérieures pour définir le style de la ligne de séparation. Dans cet exemple, la couleur de la ligne de séparation est rouge et elle comporte également des marges internes et externes.