3. 伪元素

伪元素

CSS 伪元素用于设置元素指定部分的样式。
例如，它可用于：

• 设置元素的首字母、首行的样式
• 在元素的内容之前或之后插入内容

语法
E::before、E::after 默认行内元素 content 属性必须写
E::first-letter文本的第一个字母或字
E::first-line 文本第一行
E::selection 被选中的文本

“:” 与 “::” 用于区分伪类和伪元素

1. 使用

::before和::after使用时需要注意:

• content 属性必须有
• 作为子元素插入进去
• 默认是行内元素

1.1 清除浮动的影响

.clear::after{
    content:'';
    display:block;
    clear:both;
}

1.2 模拟导航跟随线

<div class="nav-item">
    <a>首页</a>
</div>

<style>
    .nav-item::after{
        content:'';
        display:block;
        width:60px;
        height:2px;
        background-color:gray;
    }
</style>