Comment faire une ligne horizontale avec un texte au milieu en HTML ?

Réponses rédigées par Antoine

Dernière mise à jour : 2020-10-27 15:59:24

Question

Je cherche à entourer un texte par un trait horizontal prenant toute la longueur de la page, voici grosso modo le rendu désiré :

------------------------------ Un texte ------------------------------

Comment puis je faire ceci en HTML et CSS ?

Réponse

Pour créer une ligne horizontale qui entoure du texte, vous pouvez créer une CLASS CSS que vous affiliez à la balise HTML qui contient le texte, puis utiliser la propriété CSS flex pour adapter automatiquement la ligne, ainsi que les pseudo-éléments ::before et ::after pour positionner les traits.

Voici un exemple pour faire une ligne horizontale, avec un mot au milieu, en HTML et CSS :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Comment faire une ligne horizontale avec un mot au milieu en HTML ?</title>
<style> 
.ligne_horizontal { 
display: flex; 
flex-direction: row; 
} 

.ligne_horizontal:before, 
.ligne_horizontal:after { 
content: ""; 
flex: 1 1; 
border-bottom: 2px solid #000; 
margin: auto; 
} 
</style> 
</head>
<body>
<div class="ligne_horizontal">1FORMATIK.com</div> 
</body>
</html>