CSS3 伪元素选择器复习

最新推荐文章于 2024-09-25 14:00:00 发布

magician21##

最新推荐文章于 2024-09-25 14:00:00 发布

阅读量66

点赞数

分类专栏： CSS3合集文章标签： css3 html5 javascript

本文链接：https://blog.csdn.net/weixin_48927774/article/details/120807044

版权

CSS3合集专栏收录该内容

12 篇文章 0 订阅

订阅专栏

这篇博客介绍了CSS中的伪元素选择器，如`::before`和`::after`，用于在元素内容前后插入内容。示例展示了如何使用它们在div元素前添加'我'，元素后添加'小猪佩奇'，并强调了`content`属性的必要性。通过这些选择器，可以实现不依赖额外HTML标签的页面装饰和增强。

摘要由CSDN通过智能技术生成

以element::before{}或者element::after{}的形式创建伪元素选择器。
before和after必须由content属性
伪元素选择器权重为1
伪元素放到父盒子里面的前面或者后面


```handlebars
<head>
	<style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        /* div::before 权重是2 */
        div::before {
            /* 这个content是必须要写的 */
            content: '我';
        }
        
        div::after {
            content: '小猪佩奇';
        }
    </style>
</head>

<body>
    <div>
        是
    </div>