mozilla
Your Search Results

    content Redirect 2

    Summary

    The content CSS property is used with the ::before and ::after pseudo-elements to generate content in an element. Objects inserted using the content property are anonymous replaced elements.

    • Initial value normal
    • Applies to ::before and ::after pseudo-elements
    • Inherited no
    • Media all
    • Computed value 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.
    • Animatable no
    • Canonical order the unique non-ambiguous order defined by the formal grammar

    Syntax

    Formal syntax: normal | none | [ <string> | <uri> | <counter> | attr() | open-quote | close-quote | no-open-quote | no-close-quote ]+
    
    content: normal                                /* Keywords that cannot be combined with other values */
    content: none
    
    content: 'prefix'                              /* <string> value, non-latin characters must be encoded e.g. \00A0 for &nbsp; */
    content: url(http://www.example.com/test.html) /* <uri> value */
    content: chapter_counter                       /* <counter> values */
    content: attr(value string)                    /* attr() value linked to the HTML attribute value */
    content: open-quote                            /* Language- and position-dependant keywords */
    content: close-quote
    content: no-open-quote
    content: no-close-quote
    
    content: open-quote chapter_counter            /* Except for normal and none, several values can be used simultaneously */
    
    content: inherit
    

    Values

    none
    The pseudo-element is not generated.
    normal
    Computes to none for the :before and :after pseudo-elements.
    <string>
    Text content.
    <uri> url()
    The value is a URI that designates an external resource (such as an image). If the resource or image can't be displayed, it is either ignored or some placeholder shows up.
    <counter>
    Counters may be specified with two different functions: 'counter()' or 'counters()'. The former has two forms: 'counter(name)' or 'counter(name, style)'. The generated text is the value of the innermost counter of the given name in scope at this pseudo-element; it is formatted in the indicated style ('decimal' by default). The latter function also has two forms: 'counters(name, string)' or 'counters(name, string, style)'. The generated text is the value of all counters with the given name in scope at this pseudo-element, from outermost to innermost separated by the specified string. The counters are rendered in the indicated style ('decimal' by default). See the section on automatic counters and numbering for more information. The name must not be 'none', 'inherit' or 'initial'. Such a name causes the declaration to be ignored.
    attr(X)
    Returns the value of the element's attribute X as a string. If there is no attribute X, an empty string is returned. The case-sensitivity of attribute names depends on the document language.
    open-quote | close-quote
    These values are replaced by the appropriate string from the quotes property.
    no-open-quote | no-close-quote
    Introduces no content, but increments (decrements) the level of nesting for quotes.

    Examples

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

    View on jsFiddle

    Code sample - content with multiple values adding an icon before a link

    HTML Content

    <a href="http://www.mozilla.org/en-US/">Home Page</a>

    CSS Content

    a:before{
        content: url(http://www.mozilla.org/favicon.ico) " MOZILLA: ";
        font:    x-small Arial,freeSans,sans-serif;
        color:   gray;
    }

    Output

    Code sample - adding an icon after text in a custom list

    HTML Content

    <div>
      <ul class="brightIdea">
        <li>This is my first idea</li>
        <li>and another good idea</li>
      </ul>
    </div>

    CSS Content

    /* first import the icon from a suitable site */
    @import url(http://weloveiconfonts.com/api/?family=entypo);
    
    .brightIdea li:after{
        content: '\1f4a1';
        font-family: 'entypo', sans-serif;
    }

    Output

    Code Sample - class based example

    HTML Content

    <h2>Paperback best sellers</h2>
    <ol>
        <li>Political thriller</li>
        <li class="newEntry">Halloween Stories</li>
        <li>My Biography</li>    
        <li class="newEntry">Vampire Romance</li>
    </ol>

    CSS Content

    /* use a class rather that an element selector to give more flexibility.
    Simple string example, but don't forget add a leading space in the text string
    for spacing purposes  */
    
    .newEntry:after {
        content: " New!";
        color: red;
    }

    Specifications

    Specification Status Comment
    CSS Level 2 (Revision 1) Recommendation  

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support 1.0 1.0 (1.7 or earlier) 8.0 4.0 1.0
    url() support 1.0 1.0 (1.7 or earlier) 8.0 7.0 1.0
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support 1.0 1.0 (1.0) 8.0 9.5 1.0

    See also

    Document Tags and Contributors

    Contributors to this page: Sheppy
    Last updated by: Sheppy,
    Hide Sidebar