Comment puis-je créer une bordure plus petite que la largeur de ma division à l'aide de CSS ?

Bordure inférieure à la largeur div : une solution utilisant des pseudo-éléments

En HTML et CSS, les dimensions d'un élément div peuvent être définies à l'aide de l'option propriété de largeur. La taille de la bordure peut être définie à l'aide de la propriété border. Cependant, si vous souhaitez définir une bordure plus petite que la largeur du div, une approche directe ne suffira pas.

Une solution consiste à utiliser des pseudo-éléments CSS. Le pseudo-élément :before peut être ajouté au div et positionné de manière absolue. Cela permet de créer un élément qui s'étend du bas du div et qui est aussi large que souhaité.

div {
  width: 200px;
  height: 50px;
  position: relative;
  z-index: 1;
  background: #eee;
}

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

Cette approche crée effectivement une bordure au bas du div qui est aussi large que celle spécifiée dans la propriété width du pseudo-élément :before.

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!