CODEWITHSUNDEEP
htmlcss
Nick Marino
Nick Marino

Reputation: 1

what's ::after do here: <div class=foo><span>bar</span>::after</div>

I'm having trouble understanding what the :after css tag does when inserted into HTML code. For example,

<div class=foo>
  <span>xyz</span>
  ::after
</div>

Any help appreciated.

Upvotes: 0

Views: 268

Answers (3)

Sherizan
Sherizan

Reputation: 21

This is probably the easiest example to learn.

div {
  background: black;
}

div:before {
  content: "i appear before the div ";
}

div:after {
  content: " i appear after the div";
}

<div>hello</div>

Output: "i appear before the div hello i appear after the div"

It's usually good to use when you insert icons or images before or after an element like buttons with icons, etc.

Upvotes: 0

Mahesh Shukla
Mahesh Shukla

Reputation: 186

::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";
}

::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.

    CSS2 syntax = element:after { style properties }

    CSS3 syntax = element::after { style properties }

.exciting-text::after {
  content: "<- now this *is* exciting!"; 
  color: green;
}

.boring-text::after {
   content:    "<- BORING!";
   color:      red;
}
<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>

Upvotes: 4

connexo
connexo

Reputation: 56754

It's not a tag, it's a pseudo-element selector used in CSS that creates an element :before or :after the targeted element.

What Does A Pseudo-Element Do?

A pseudo-element does exactly what the word implies. It creates a phoney element and inserts it before or after the content of the element that you’ve targeted.

The word “pseudo” is a transliteration of a Greek word that basically means “lying, deceitful, false.” So, calling them pseudo-elements is appropriate, because they don’t actually change anything in the document. Rather, they insert ghost-like elements that are visible to the user and that are style-able in the CSS.

http://www.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/

Upvotes: 0

Related Questions