QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads CSS3 :before and :after Psuedo-Elements and Generated Content

CSS3 :before and :after Psuedo-Elements and Generated Content

:after and :before Pseudo Elements

CSS3 supports two new types of pseudo elements called as :before and :after. :after is used to insert a span tag after the content of the selected HTML element, similarly :before is used to insert a span tag before the content.

These psuedo elements only work if you use the css “content” attribute inside them.

Suppose this is the CSS:

div:before
{
    /*Must use content css property. It can be empty string.*/
    content: "";
}

Then we get this HTML

<div>
<span></span>This is the div tag text
</div>

We can apply style properties to the newly added span tag the same way as we style any other span tag is styled.

content Attribute

CSS content attribute can only be used inside these two pusedo elements. It is used to insert content inside the created span tag.

content attribute can take the following values:

  • String
  • attr() CSS expression
  • CSS counter() function

String value for content attribute
We can assign a empty or a non-empty string. If the string contains HTML, CSS or JS code then they will be escaped automatically therefore you cannot put HTML code inside the generated span tag. If you want to display HTML special characters, glyphs etc then their codes will not work instead you have to use CSS codes.

Use the entity conversion calculator to convert HTML codes to CSS codes.

Find complete list of Glyphs and Characters.

attr() CSS expression as value for content attribute
The attr() CSS expression is used to retrieve the value of an attribute of the selected element and use it in the style sheet. It can be used on these pseudo-elements too and, in this case, the value of the attribute on the pseudo-element’s originated element is returned. More information on attr().

CSS counter() function as value for content attribute
CSS counters are variables in CSS which can be used to store numbers.

Counters are defined using counter-reset. counter-reset is also used to reset the value of a counter to something else.

They are incremented using counter-increment. counter-increment increments the value whenever the CSS rule is applied to an element.

counter() function returns the counter values to the content property. Therefore counter() can only be used in content attribute value.

Complete information on CSS counter.

Some other values

The above ones are most used values. But content property can also take values like url(url), open-quote, close-quote. url(url) points to a media like image file, audio file or video file. open-quote and close-quote add quotes to the beginning and end respectively.

Jul 19, 2014Narayan Prusty
PageSpeed Insights APIMultiple Pages In Phonegap
Comments: 0

    Leave a Reply Cancel reply

    To create code blocks or other preformatted text, indent by four spaces:

        This will be displayed in a monospaced font. The first four
        spaces will be stripped off, but all other whitespace
        will be preserved.
        
        Markdown is turned off in code blocks:
         [This is not a link](http://example.com)
    

    To create not a block, but an inline code span, use backticks:

    Here is some inline `code`.

    For more help see http://daringfireball.net/projects/markdown/syntax

    Narayan Prusty

    I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

    8 years ago 3 Comments Web Development
    Share this
    0
    GooglePlus
    0
    Facebook
    0
    Twitter
    0
    Linkedin
    • :after and :before Pseudo Elements
    • content Attribute
    Related Articles
    • Styling Text using CSS
    • Changing CSS Style using JavaScript
    • Adding Custom Content to Printed Web Pages
    • Creating a WYSIWYG Editor
    • CSS Specificity: Priortizing Selectors Rules
    Our Sponsor
    My Books

    2014 - 2015 © QNimate
    All tutorials MIT license