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 :

• position : relative sur le div parent permet le positionnement de la bordure générée absolument.
• content : "" crée un élément vide qui fera office de bordure personnalisée.
• background : black spécifie la couleur de la bordure.
• position : absolue rend le généré élément positionnable.
• bas : 0 et gauche : 0 positionne la bordure dans le coin inférieur gauche du parent div.
• hauteur : 50 % limite la bordure à la moitié de la hauteur de l'élément parent.

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!