css3 after和hover

CSS3中的after是指在一个元素的最后面添加一个伪元素，用于展示视觉效果。after一般与content属性结合使用，用于在元素的后面加上一些样式。

    .Box:after {
        content: "";
        display: block;
        background-color: red;
        height: 10px;
        width: 10px;
    }

在上述代码中，我们定义了一个.Box元素的after伪元素，并设置了其content为空。所以after伪元素看起来就像一个红色的方块。

除了after，CSS3中的hover也是一个非常常用的选择器，用于当用户鼠标悬停在一个元素上时，触发元素的样式变化。

    .button:hover {
        background-color: blue;
        color: white;
    }

在上述代码中，我们定义了一个.button元素，用于表示一个按钮，当鼠标悬停在按钮上时，它的背景颜色由默认的背景颜色变成蓝色，并且字体颜色变成白色。

通过使用after伪元素和hover选择器，我们可以轻松地实现一些视觉效果，提高网页的交互性和用户体验。