Comment créer une superposition de bordure pour les divisions enfants avec des pseudo-éléments ?

Création d'une superposition de bordure pour les divisions enfants

Problème :

Vous devez concevoir un bordure qui superpose le contenu d'un div enfant, similaire à l'image fourni.

Code HTML et CSS :

<div class="box-border box-border-participe">
  <div class="box-participe">
    <a>Participe</a>
  </div>
</div>

.box-participe {
  background-color: #94C120;
  padding: 10px 40px;
}

Solution :

Pour y parvenir en utilisant un pseudo éléments, vous pouvez créer une bordure et éviter un balisage supplémentaire. Vous pouvez également contrôler sa position et sa taille sans effort :

body {
  background: grey;
}

.button {
  background: #94c120;
  width: 200px;
  height: 50px;
  margin: 50px;
  position: relative;
}

.button:before {
  content: "";
  position: absolute;
  top: -15px;
  left: -15px;
  width: 100%;
  height: 100%;
  border: 5px solid #fff;
  box-sizing: border-box;
}

En utilisant cette méthode, vous pouvez facilement créer une superposition de bordure élégante pour vos divs enfants, améliorant ainsi l'attrait visuel de votre site Web.

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!