Maison >interface Web >tutoriel CSS >Comment puis-je contrôler la longueur d'une bordure CSS sans HTML supplémentaire ?
Personnalisation de la longueur de la bordure avec CSS
Alors que vous cherchez à limiter la longueur d'une bordure sans ajouter d'éléments supplémentaires, examinons un Solution CSS qui y parvient avec élégance.
Pour créer une bordure qui ne s'étend qu'à mi-hauteur d'un élément, vous pouvez exploiter le contenu généré par CSS. Voici comment procéder :
HTML :
<div>Lorem Ipsum</div>
CSS :
div { position: relative; } div:after { content: ""; background: black; position: absolute; bottom: 0; left: 0; height: 50%; width: 1px; }
Dans cet extrait CSS :
Cette technique génère une bordure qui ne s'étend qu'à mi-hauteur à partir du coin inférieur gauche du div sans nécessiter d'éléments HTML supplémentaires ou de sélecteurs frères et sœurs.
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!