le MEMO du WEB développeur
••• CSS •••  Liste des Mémos, astuces et bonnes pratiques

Rajouter une image en CSS avec la balise :before ou :after

Voici comment rajouter une image avant ou après un élément HTML, en utilisant les pseudo éléments CSS :before ou :after
 

Le code suivant va afficher l'image url(img/facebook.png)  avant le div d'identifiant mon_div

Code HTML :

<div id="mon_div"> Mon div </div>

Code CSS :

#mon_div:before{ 
  content:url(img/facebook.png) ;
  position:relative; 
  left:-3px;
  top:10px;
 }

 

publié le 27/05/2014 par Memo Web
Commenter le Mémo :

Effet carnet de notes en CSS 3 - empilement de feuilles
Arrondir les bords d'un élément
Un effet de changement de couleur fluide en CSS3
Effet ruban sur un titre en CSS 3
Width à  100% avec padding : Lorsque l'élément est plus large que prévu
Lorsque le margin appliqué à un enfant déplace son parent
Les transitions en CSS3 : rotation d'un élément - rotate()
Enlever la bordure qui apparaît au survol d'une image sur un lien hypertexte
Comment utiliser une police google web font sur son site Internet
Colorer une ligne sur 2 dans un tableau en CSS3
Ajoutez vos propres Mémos sur MEMO-WEB

Il suffit de vous créer un compte sur le site

Vous pourrez choisir un thème parmis l'une des catégories proposées par MEMO-WEB.

Rédigez votre Mémo.
Après validation par MEMO-WEB, il sera mis en ligne.
Ajouter vos Mémos