Comment puis-je garder la longueur de la bordure d'une division plus courte que sa largeur ?

Maintenir la longueur de la bordure dans la largeur de la division

Dans certains scénarios, vous pouvez rencontrer une situation où la largeur de la bordure d'un élément, tel qu'un div, dépasse la largeur de l'élément lui-même. Pour résoudre ce problème, nous pouvons utiliser la solution suivante :

Utilisation de pseudo-éléments

Les pseudo-éléments fournissent un moyen d'ajouter du contenu à un élément sans affecter son contenu ou sa structure réelle. Dans ce cas, nous pouvons créer un pseudo-élément et le positionner dans le div pour simuler une bordure plus courte.

Exemple d'implémentation

Considérez l'extrait de code suivant :

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

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

Dans cet exemple, nous créons un pseudo-élément avec le sélecteur :before. Le pseudo-élément est positionné dans le coin inférieur gauche du div et reçoit une largeur de 100 px, ce qui est inférieur à la largeur du div. Nous appliquons ensuite une bordure magenta au pseudo-élément, créant l'illusion d'une bordure plus courte que la largeur du div tout en conservant la largeur du div d'origine.

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!