Comment créer des titres centrés élégants avec des barres horizontales sans chevauchement de texte ?

Titres élégants avec barres horizontales

Lors de la création de titres centrés avec des barres horizontales de chaque côté, il peut être difficile d'éviter que les barres ne se croisent le texte. Voici une solution pour obtenir cet effet en utilisant du CSS pur :

Présentation de la solution

Cette méthode utilise des pseudo-éléments pour créer les barres horizontales et les place à une position relative spécifique au texte. De plus, une marge négative sur l'une des barres ainsi qu'un débordement sont appliqués pour masquer les barres où le texte existe.

Mise en œuvre

Pour implémenter cette solution, suivez ces étapes :

1. Définissez la règle CSS suivante pour le titre :

<code class="css">h1 {
    position: relative;  
    font-size: 30px;  
    z-index: 1;
    overflow: hidden;
    text-align: center;
}</code>

Cette règle positionne le titre, spécifie la taille de la police et permet le masquage du débordement.

2. Créer des pseudo-éléments pour les barres :

<code class="css">h1:before, h1:after {
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 50%;
    height: 1px;
    content: '\a0';
    background-color: red;
}</code>

Ces pseudo-éléments sont placés au centre du titre avec une certaine largeur et hauteur, et ils fonctionneront comme les barres horizontales.

3. Décalez et alignez la barre de gauche :

<code class="css">h1:before {
    margin-left: -50%;
    text-align: right;
}</code>

Cette règle applique une marge négative à la barre de gauche pour l'aligner et garantir qu'il est masqué là où le texte apparaît.

En implémentant ces règles CSS, vous pouvez facilement créer des titres centrés avec des barres horizontales qui disparaissent lorsqu'elles traversent le texte, sans inclure d'éléments HTML supplémentaires.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!