Comment puis-je créer une bordure plus courte que la largeur de ma div ?

Longueur de la bordure moins profonde que la largeur du Div

Votre code définit un élément div avec une largeur de 200 px et une bordure magenta solide de 1 px le long de son bas bord. Cependant, vous cherchez une méthode pour limiter la longueur de cette bordure à seulement 100 px sans modifier la largeur du div.

Les pseudoéléments apportent une solution. Les pseudo-éléments sont des éléments ajoutés à votre arborescence DOM, vous permettant de styliser des parties d'un élément existant. Dans ce cas, vous pouvez créer un pseudo-élément qui fait office de bordure :

div:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 50%;  /* or 100px */
  border-bottom:1px solid magenta;
}

Ce pseudo-élément, qui se positionne absolument en bas à gauche du div, reproduit la longueur de bordure souhaitée de 100px. En ajustant sa propriété width, vous pouvez facilement contrôler la longueur de la bordure sans affecter la propre largeur du div.

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!