伪元素（自创标签）-阿里云开发者社区

伪元素（自创标签）

2024-05-13 29

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 伪元素（自创标签）

接下来我们讲讲伪元素，伪就是假的意思，元素就是标签。

所以说伪元素的意思就是假的标签，就相当于是我们自己造的标签，而不是系统具有的。

但是它只能在一个标签里面使用，相当于是在一个父级里面，在父级内容里面添加元素。

什么不懂？那我们直接看实操。

 <div>
    爱
 </div>

这样运行结果只有一个爱字

<style>
      div::before{
        content:"吕布";
      }
</style>

但是我们加了伪元素，就出现了吕布。

  <style>
      div::before{
        content:"吕布";
      }
      div::after{
        content:"貂蝉";
      }
    </style>

我们再加一个伪元素，就出现了貂蝉。

是不是非常的神奇？当然，这不是只能加内容，这确确实实就是一个标签。

不信咱们可以直接加点属性来看，若直接加背景色，宽和高，我们也能发现它的确存在。

<style>
        div{
            width: 300px;
            height: 300px;
            background-color: skyblue;
            
        }
        
      div::before{
        content: " ";
        width: 50px;
        height: 50px;
       background-color: pink;
       display: block;
      }
 
      div::after{
        content:"貂蝉";
      }
    </style>

所以说这确确实实是一个标签。

总结一下，伪元素，就是用来创建一个标签的，但是它只能创造一个标签的里面，也就是需要有个父级环境，::before表示，在该父级的内容最前面，::after表示，在该父级内容的最后面。

值的注意的是：

1.必须要加入content才能生效，

2.写中文的时候加"",如果不加内容就" "中间加一个空格

3.用伪元素创建的标签默认是行内，不能改变宽高，所有上面我设置成了块，方便检验

伪元素（自创标签）

热门文章

最新文章

相关电子书