CSS label :before and :after

Question

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

Answer 1

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.