Maison > Article > interface Web > 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 :
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!