CSS pur pour obtenir l'effet d'un signe plus (exemple de code)

Ce que cet article vous apporte concerne l'effet de l'ajout d'un signe en CSS pur (exemple de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Obtenez l'effet de signe plus dans l'image ci-dessous :

Si vous souhaitez obtenir cet effet, vous n'avez besoin que d'un seul p élément.

Vous devez utiliser CSS pour les fonctionnalités avant, après et bordure.

Définissez d'abord une note div

<div></div>

, puis définissez une bordure :

.add {
  border: 1px solid;
  width: 100px;
  height: 100px;
  color: #ccc;
  transition: color .25s;
  position: relative;
}

À ce stade, la bordure ressemble à ceci :

On peut utiliser la pseudo-classe avant et sa bordure-haut pour définir un "horizontal" :

.add::before{
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80px;
  margin-left: -40px;
  margin-top: -5px;
  border-top: 10px solid;
}

Notez que nous utilisons le positionnement absolu . À ce moment-là, cela devient comme ceci :

En vous référant à ce qui précède, nous pouvons utiliser la pseudo-classe after et la border-bottom pour définir un " vertical":

.add::after {
 content: '';
 position: absolute;
 left: 50%;
 top: 50%;
 height: 80px;
 margin-left: -5px;
 margin-top: -40px;
 border-left: 10px solid;
}

Ajoutez la pseudo-classe de survol et définissez la couleur du survol de la souris :

Le style final :

Au survol de la souris, elle changera de couleur :

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!