mozilla
Vos résultats de recherche

    content

    Résumé

    La propriété CSS content est utilisée avec les pseudo-éléments :before et :after pour générer du contenu dans un élément. Les objets insérés grâce à la propriété content sont des éléments remplacés anonymes.

    • Valeur initiale normal
    • S'applique à ::before and ::after pseudo-elements
    • Héritée non
    • Pourcentages
    • Média all
    • Valeur calculée On elements, always computes to normal. On ::before and ::after, if normal is specified, computes to none. Otherwise, for URI values, the absolute URI; for attr() values, the resulting string; for other keywords, as specified.
    • Animable non
    • Ordre canonique l'ordre unique et non-ambigu défini par la grammaire formelle

    Syntaxe

    content: normal | none | 
           [ <string> | <uri> | <counter> | attr() | 
             open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit
    

    Valeurs

    none
    La pseudo-élément n'est pas généré.
    normal
    Résulte en none pour les pseudo-éléments :before et :after.
    <string>
    Contenu sous forme de texte.
    <uri> url()
    La valeur est l'URI qui désigne une source extérieure (comme une image). Si la ressource ou l'image ne peut être affichée, elle est soit ignorée ou un texte de remplissage prend la place.
    <counter>
    [fixme] Les compteurs peuvent être spécifiés grâce à deux fonctions : 'counter()' ou 'counters()'. Le premier possède deux formes : 'counter(name)' ou 'counter(name, style)'. Le texte généré est la valeur du compteur le plus profond possédant un nom donné dans ce pseudo-élément ; il est formatté selon le style indiqué (decimal par défaut). Le second a lui aussi deux formes : 'counters(name, string)' ou 'counters(name, string, style)'. Le texte généré est la valeur de tous les compteurs d'un nom donné dans ce pseudo-élément, depuis le plus jusqu'au plus profond séparés par la chaîne définie. Les compteurs sont formattés selon le style indiqué (decimal par défaut). Voir la section sur les compteurs automatiques et sur la numérotation pour plus d'information. Le nom doit être différent de « none », « inherit » ou « initial ». De tels noms font que la déclaration sera ignorée.
    attr(X)
    Renvoie la valeur de l'attribut X de l'élément comme une chaîne. S'il n'existe pas d'attribut X, une chaîne vide est renvoyée. La sensibilité à la casse du nom de l'attribut dépend du langage utilisé.
    open-quote | close-quote
    Ces valeurs sont remplacées par la chaîne appropriée de la propriété quotes.
    no-open-quote | no-close-quote
    N'introduit aucun contenu, mais incrémente (respectivement décrémente) le niveau d'imbrication des citations.

    Exemples

    q:lang(en) { quotes: '"' '"' "'" "'" }
    q:before   { content: open-quote }
    q:after    { content: close-quote }
    
    h1:before  { content: "Chapter: "; }
    
    /* content accepte des valeurs multiples */
    
    a:before   { content: url(http://www.mozilla.org/favicon.ico) " MOZILLA: "; 
                 font:    x-small Arial,freeSans,sans-serif;
                 color:   gray;
               }
    

    Vue sur jsFiddle

    Spécifications

    Spécification Statut Commentaire
    CSS Level 2 (Revision 1) Recommendation  

    Compatibilité des navigateurs

    Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Support de base 1.0 1.0 (1.7 ou moins) 8.0 4.0 1.0 (85)
    url() 1.0 1.0 (1.7 ou moins) 8.0 7.0 1.0 (85)
    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Support de base 1.0 1.0 (1.0) 8.0 9.5 1.0

    Voir également

    :after, :before, quotes

    Étiquettes et contributeurs liés au document

    Contributors to this page: teoli, FredB
    Dernière mise à jour par : teoli,
    Masquer la barre latérale