Cours par Webcam

Cours par Webcam

Formateur Web pour adultes depuis plus 11 ans, je vous propose des COURS collectifs par WEBCAM en LIVE pour booster vos connaissances et être autonome dans la création de site.

En savoir plus

CSS - texte

CSS - police

CSS - arrière-plan

CSS - boîte

CSS - mise en page

CSS - liste

CSS - tableau

CSS - animation

CSS - pseudo-class

CSS - pseudo-élément

CSS - les sélecteurs

Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn

Attribut CONTENT

Rôle

L’attribut content permet d’insérer du contenu avec les pseudo-éléments :before et :after

Version : CSS2

Héritage (inherit) : non

Propriété Javascript : element.style.content

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

p:after{ /* apres le paragraphe */
  content: " --@Dany";
  color: red;
}

– Le code HTML

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ab at voluptatibus
 numquam reiciendis placeat quasi ducimus facilis quo natus alias fuga vitae debitis tenetur corporis
 tempore labore obcaecati nam!</p>

Résultat

La mention « tweet » (en rouge) a été rajoutée par le CSS à la fin du paragraphe

Compatibilité

navigateur-chromenavigateur-firefoxnavigateur-ienavigateur-safarinavigateur-opera

L’attribut content est pris en charge par tous les principaux navigateurs

Valeurs

Les différentes valeurs de l’attribut content sont:

normal
Valeur par défaut : souvent rien
Syntaxe :
content : normal
none
Aucun contenu
Syntaxe :
content : none
counter()
Définit un compteur. Doit s’utiliser avec l’attribut counter-increment 
Exemple :

string
Définit une chaine de caractères entre guillemets
Syntaxe :
content : "david"
attr()
Le contenu correspond à l’un des attributs de l’élément HTML

<a href="//tutowebdesign.com">Votre site : </a>
a:after {
content : attr(href)" ";
}

Exemple :

url()
Le contenu correspond à une ressource externe (image, ou autre média)
Syntaxe :
content : url(monimage.jpg)Exemple :

open-quote
Ajoute un guillemet de début
Syntaxe :
content : open-quoteExemple :

close-quote
Ajoute un guillemet de fin si un guillemet de début a été ajouté
Syntaxe :
content : close-quoteExemple :

no-open-quote
Supprime le guillemet de début si spécifié
Syntaxe :
content : no-open-quoteExemple :

no-close-quote
Supprime le guillemet de fin si spécifié
Syntaxe :
content : no-close-quoteExemple

initial
Le contenu à ajouter est défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécificité, par exemple un paragraphe peut ignorer le rajout de contenu imposée par une feuille de style qui cible aussi cet élément.
Syntaxe :
content : initial
inherit
Hérite de la même propriété que l’élément parent.
Syntaxe :
content : inherit

A voir aussi

color– text-align– text-decorationtext-transform– text-indent– word-spacing– line-height– letter-spacing– white-space– vertical-align– direction

A lire aussi

tutowebdesign

Afficher du contenu au scroll

Afficher du contenu au scroll Voici un effet impressionnant et pourtant très facile à mettre en place sur vos pages. Le principe consiste à faire

Lire »
MegaphoNews - Closer Than Ever

The leading news agency comes to your smartphone.  Download now.

Politique d'utilisation des cookies

En poursuivant votre navigation sur ce site, vous acceptez l’utilisation de cookies. Les cookies nous permettent de personnaliser le contenu, les sorties et d’optimiser notre trafic.