伪元素

可以当元素来操作,但是没有HTML结构
content只有伪元素有
css:

span::before{
    content: "我";
}
span::after{
    content: "真的";
}

html

<span>很嗨</span>

大白话就是:在元素旁边有两个元素,一个是前面的(before)一个是后面的(after),这两个元素就是伪元素,他还可以更改自己的宽和高,前提是display是block,还可以定位等...
伪元素天生是行级元素
淘宝导航栏布局
html

    <ul class="nav">
        <li class="list-item">
            <a href="index.html">天猫</a>
        </li>
        <li class="list-item">
            <a href="index.html">聚划算</a>
        </li>
        <li class="list-item">
            <a href="index.html">天猫超市</a>
        </li>
    </ul>

css

*{
    padding: 0;
    margin: 0;
    color: #424242;
    font-family: arial;
}
a{
    text-decoration: none;
}
.nav::after{
    content: "";
    display: block;
    clear: both;
}
.nav{
    list-style: none;
}
.nav .list-item{
    line-height: 30px;
    float: left;
    margin:0 10px;
}
.nav .list-item a{
    border-radius: 20px;
    padding: 10px;
    display: block;
    height: 30px;
    color: #f40;
    font-weight: bold;
}
.nav .list-item a:hover{
    background-color: #FF4400;
    color: white;
}