Voici quelques titres d'articles basés sur des questions qui correspondent au texte fourni : * Comment créer un titre centré avec des lignes horizontales des deux côtés (sans arrière-plan) ? * Vous souhaitez vous ajouter des lignes horizontales

Comment créer un titre avec des lignes horizontales des deux côtés sans arrière-plan

Dans ce scénario, vous devez créer un titre de page centré avec lignes horizontales des deux côtés sans aucune couleur de fond.

Solution CSS :

h1 {
    position: relative;
    font-size: 30px;
    z-index: 1;
    overflow: hidden;
    text-align: center;
}
h1:before, h1:after {
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 50%;
    height: 1px;
    content: '\a0';
    background-color: red;
}
h1:before {
    margin-left: -50%;
    text-align: right;
}

/*Optional for background color*/
.color {
    background-color: #ccc;
}

Explication :

• h1 est positionné relativement et centré à l'aide de text-align: center.
• Les éléments avant et après sont créés à l'aide de :before et :after et positionnés absolument à 51 % en haut pour les centrer verticalement.
• La propriété content avec 'a0' (espace insécable) fait disparaître les lignes là où se trouve le texte.
• overflow : caché garantit que les lignes ne chevauchent pas le texte.
• En option, vous Vous pouvez utiliser la classe .color pour ajouter une couleur d'arrière-plan si vous le souhaitez.

Remarque : Cette solution peut gérer des titres de différentes longueurs sans ajuster manuellement le placement des lignes.

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!