伪元素选择器

最新推荐文章于 2023-06-27 22:26:33 发布

叫我邱球球

最新推荐文章于 2023-06-27 22:26:33 发布

阅读量485

点赞数

分类专栏：有关CSS 文章标签： css 前端心得属性博客

本文链接：https://blog.csdn.net/CallMeQiuqiuqiu/article/details/62044738

版权

有关CSS 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

感冒终于有点想好的意思了。。。赶快来学习。。。。我是不是个好孩纸。。。

今天来看伪元素选择器。

伪元素选择器就是给指定的标签内容前面或者后面添加一个子元素。

先设置一个div，其中的内容是抵制萨德

我们的目标是在“抵制萨德”的前面加上一个内容“我爱中国”，在“抵制萨德”的后面也添加一个内容“从我做起”。

那么利用伪元素选择器的代码是：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: red;
        }
div::before{
     content: "我爱中国";
     width: 70px;
     height: 30px;
     display: block;
     background-color: pink;
 }
        div::after{
     content: "从我做起";
     width: 70px;
     height: 30px;
     display: block;
     background-color: pink;
 }
    </style>
</head>
<body>
<div>
    抵制萨德
</div>
</body>
</html>

由上面的代码可以知道

我们这次学习的伪元素选择器见就是

::before{

content:"";

其他属性: 值;

}

::after{

content:"";

其他属性: 值;

}

叫我邱球球

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
伪元素选择器

感冒终于有点想好的意思了。。。赶快来学习。。。。我是不是个好孩纸。。。今天来看伪元素选择器。伪元素选择器就是给指定的标签内容前面或者后面添加一个子元素。先设置一个div，其中的内容是抵制萨德我们的目标是在“抵制萨德”的前面加上一个内容“我爱中国”，在“抵制萨德”的后面也添加一个内容“从我做起”。那么利用伪元素选择器的代码是：伪元素选
复制链接

扫一扫