[分享]css中after与before

CSS中的:before和:after选择符用于在元素之前和之后插入内容。这些选择符将在您的CSS样式表中的元素选择器后面使用，并且可以用于添加图像、字符或其他属性。下面是示例代码： .myeleme...

CSS中的:before和:after选择符用于在元素之前和之后插入内容。这些选择符将在您的CSS样式表中的元素选择器后面使用，并且可以用于添加图像、字符或其他属性。下面是示例代码：

 .myelement::before{
        content: "Hello";
    }
    .myelement::after{
        content: "World";
    } 

在上面的代码片段中，“.myelement”是CSS选择器，而“::before”和“::after”是伪元素选择器。所以这个代码块给“myelement”类的元素添加了在其前面“Hello”和后面“World”的内容。

您还可以使用伪元素选择器来添加图片，在下面的代码中，我们将使用图片作为示例：

 .myelement::before{
        content: "";
        background-image: url('path/to/image.png');
        width: 50px;
        height: 50px;
        display: inline-block;
    } 

在这个样例中“content：”被设置为空，这是因为我们要在:before装饰器中添加的是背景图像，而不是文本。同时，我们也可以设置其他CSS属性，例如图片的宽度和高度，这些属性也可以用于其他CSS样式表中的元素。

在使用before和after选择器的时候，还需要注意以下一些细节：

• 伪元素选择器必须放在选择器的末尾。
• 在IE8及以下的版本中，伪元素选择器必须以一个单个冒号开头。
• before和after在文档中是语义含义上不存在的元素，您无法使用它们来添加真实的HTML元素。

总之，:before和:after选择器是非常有用的CSS属性，它们使设计人员可以轻松地插入元素以装饰和增强网页。