CSS label :before and :after

css, pseudo-element

Solution

They set something after and before the element you are selecting. For example:

p:after {
    content: 'hi! im after';
}

p:before {
    content: 'hi! im before';
}

You will understand it better if you see this fiddle.

Problem

I am learning CSS and I am having a bit of trouble recognizing properties and understanding some of the syntax. in the CSS below. ``` .tabs nav li.tab-current:before, .tabs nav li.tab-current:after { } ``` I understand that tabs is a class and the `nav li` with the class `tab-current` within the `tabs` class in html will be applied with the same CSS. Example: ``` <div class="tabs"> <nav> <ul> <li class="tab-current">Hey</li> <li>hello</li> </ul> </nav> </div> ``` However I'm not quite sure what `:before` and `:after` represent. Could someone provide me with an example? Thank you

Original source