CSS 标签 :before and :after

Question

我正在学习 CSS，但在识别属性和理解某些语法时遇到了一些麻烦。在下面的 CSS 中。

.tabs nav li.tab-current:before,
.tabs nav li.tab-current:after {

}

我知道标签是一个类，而 nav li与类(class) tab-current内 tabs html 中的类将应用相同的 CSS。

例子:

        <div class="tabs">
            <nav>
                <ul>
                    <li class="tab-current">Hey</li>
                    <li>hello</li>
                </ul>
            </nav>
        </div>

但是我不太确定是什么 :before和 :after代表。有人可以为我提供一个例子吗？谢谢

Answer 1

他们在您选择的元素之后和之前设置了一些东西。例如:

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

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

看 this fiddle你会更明白.