Maison > Article > interface Web > 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!