::before and ::after selectors in css


Summary

The CSS ::after pseudo-element matches a virtual last child of the selected element. Typically used to add cosmetic content to an element, by using the content CSS property. This element is inline by default.

Syntax

How to read CSS syntax.

element:after  { style properties }  /* CSS2 syntax */

element::after { style properties }  /* CSS3 syntax */

The ::after notation was introduced in CSS 3 in order to establish a discrimination between pseudo-classes and pseudo-elements. Browsers also accept the notation :after introduced in CSS 2.

Examples

Simple usage

Let’s create two classes, one for boring paragraphs and one for exciting ones. We can then mark each paragraph by adding a pseudo-element to the end of it.

<p class="boring-text">Here is some good old boring text.</p>
<p>Here is some moderate text that is neither boring nor exciting.</p>
<p class="exciting-text">Contributing to MDN is easy and fun.
Just hit the edit button to add new live samples, or improve existing samples.</p>
 .exciting-text::after {
   content:    "<- now this *is* exciting!"; 
   color:      green;
}

.boring-text::after {
   content:    "<- BORING!";
   color:      red;
}

Output

https://mdn.mozillademos.org/en-US/docs/Web/CSS/::after$samples/Simple_usage?revision=691383

Decorative example

We can style text or images in the content property almost any way we want.

<span class="ribbon">Notice where the orange box is.</span>
.ribbon {
   background-color: #5BC8F7;
}

.ribbon::after {
   content:          "Look at this orange box.";
   background-color: #FFBA10;
   border-color:     black;
   border-style:     dotted;
}
 Output

https://mdn.mozillademos.org/en-US/docs/Web/CSS/::after$samples/Decorative_example?revision=691383

Tooltips

The following example shows the use of the ::after pseudo-element in conjunction with the attr()CSS expression and a data-descr custom data attribute to create a pure-CSS, glossary-like tooltip. Checkout the live preview below, or you can see this example in a separate page.

<p>Here is the live example of the above code.<br />
  We have some <span data-descr="collection of words and punctuation">text</span> here with a few
  <span data-descr="small popups which also hide again">tooltips</span>.<br />
  Dont be shy, hover over to take a <span data-descr="not to be taken literally">look</span>.
</p>
    span[data-descr] {
        position: relative;
        text-decoration: underline;
        color: #00F;
        cursor: help;
    }

    span[data-descr]:hover::after {
        content: attr(data-descr);
        position: absolute;
        left: 0;
        top: 24px;
        min-width: 200px;
        border: 1px #aaaaaa solid;
        border-radius: 10px;
        background-color: #ffffcc;
        padding: 12px;
        color: #000000;
        font-size: 14px;
        z-index: 1;
    }
 Output

https://mdn.mozillademos.org/en-US/docs/Web/CSS/::after$samples/Tooltips?revision=691383


::after
is a pseudo element which allows you to insert content onto a page from CSS (without it needing to be in the HTML). While the end result is not actually in the DOM, it appears on the page as if it is, and would essentially be like this:

div::after {
  content: "hi";
}
<div>
  <!-- Rest of stuff inside the div -->
  hi
</div>

::before is exactly the same only it inserts the content before any other content in the HTML instead of after. The only reasons to use one over the other are:

  • You want the generated content to come before the element content, positionally.
  • The ::after content is also “after” in source-order, so it will position on top of ::before if stacked on top of each other naturally.

The value for content can be:

  • A string: content: "a string"; – special characters need to be specially encoded as a unicode entity. See the glyphs page.
  • An image: content: url(/path/to/image.jpg); – The image is inserted at it’s exact dimensions and cannot be resized. Since things like gradients are actually images, a pseudo element can be a gradient.
  • Nothing: content: “”; – Useful for clearfix and inserting images as background-images (set width and height, and can even resize with background-size).
  • A counter: content: counter(li); – Really useful for styling lists until :marker comes along.

Note that you cannot insert HTML (at least, that will be rendered as HTML). content: "<h1>nope</h1>";

: vs ::

Every browser that supports the double colon (::) CSS3 syntax also supports just the (:) syntax, but IE 8 only supports the single-colon, so for now, it’s recommended to just use the single-colon for best browser support.

:: is the newer format indented to distinguish pseudo content from pseudo selectors. If you don’t need IE 8 support, feel free to use the double-colon.

Source Credits:
http://css-tricks.com/almanac/selectors/a/after-and-before/
https://developer.mozilla.org/en-US/docs/Web/CSS/::after

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s