Maison >interface Web >tutoriel CSS >Comment puis-je contrôler la longueur d'une bordure CSS sans HTML supplémentaire ?

Comment puis-je contrôler la longueur d'une bordure CSS sans HTML supplémentaire ?

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-12-13 19:49:11334parcourir

How Can I Control the Length of a CSS Border Without Extra HTML?

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn