santé mentale emplois nyc https://pilulesfrance.com/dysfonction-erectile/cialis-sur-internet/ où puis-je acheter des pilules abortives

Playground css - faire un symbole de tag en CSS

Voici un petit snippet permettant de générer via les pseudo élements ::before et ::after un symbole de tag pour vos blogs :

Exemple :

Comment faire ?

Comme indiqué précédemment, il suffit d'utiliser les pseudo éléments ::before et ::after.

Partons d'un span classique auquel nous allons ajouté la classe "ruban" :

<style>
span.ruban {
    background: #2E2E2E;
    display: block;
    width: 0;
    height: 0;
    position: relative;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: 13px solid #2E2E2E;
}
</style>

<span class="ruban">

ensuite avec le before nous allons faire le point et avec le after l'extrémité (regarder la démo pour visualiser)

span.ruban::before, span.ruban:before {
    content: '';
    background: #FFF;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    width: 7px;
    height: 7px;
    display: block;
    position: absolute;
    top: -3px;
    left: -3px;
    z-index: 1;
}


span.ruban::after, span.ruban:after {
    background: #2E2E2E;
    content: '';
    width: 50px;
    height: 36px;
    display: block;
    position: absolute;
    top: -2px;
    left: -9px;
    display: block;
    -webkit-transform: rotateZ(45deg);
    -moz-transform: rotateZ(45deg);
    -o-transform: rotateZ(45deg);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

Et voici le résultat :

image jerome debray

Jerome Debray est responsable de projet et lead developper web pour Ouestfrance Multimedia dans la business unit Auto.

retourner en haut de la page