CSS标签:之前和之后

Question

我正在学习CSS,我在识别属性和理解一些语法方面遇到了一些麻烦.在CSS下面.

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

}

我知道制表符是一个类,而html中nav li类tab-current中的tabs类将使用相同的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';
}

如果你看到这个小提琴,你会更好地理解它.

Answer 2

:before并:after为它们所应用的元素创建伪元素作为“子元素”。它们通常用于某些样式或错误消息。

小提琴：http : //jsfiddle.net/XjUM8/1/

div:before {
    content: "Before";
    background: red;
}

div:after {
    content: "After";
    background: blue;
    color: white;
}

您还可以设置它们以使其悬停显示

小提琴：http : //jsfiddle.net/XjUM8/2/

div:hover:before {
    content: "Before";
    background: red;
}

div:hover:after {
    content: "After";
    background: blue;
    color: white;
}

另外，请看一下MDN： 之前和之后