CSS3高级选择器关于 :before 的问题

夜箜泠

已于 2022-04-26 14:38:10 修改

阅读量1.7k

点赞数

分类专栏： css学习文章标签： css3 css html5

于 2021-09-22 18:35:27 首次发布

本文链接：https://blog.csdn.net/XXX51129/article/details/120419885

版权

css学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

:before

p:before在每个元素的内容之前插入内容

主体示例：

<body>
    <span>
        <p>星星</p>
        <p>月亮</p>
        <p>一起</p>
        <p>闪耀</p>
    </span>
</body>

样式示例：

before:

span p:before{
           content: "——"; 
        }
/* 在p标签前插入 —— */

注意事项：

1、使用 :before 插入图片时，图片大小不可更改。

2、使用 :before 插入的元素是行内元素，设置宽高不生效，需要转为行内块元素。

span p::before{
            content: '';
            /* 不可省略content 必写
            因为要在其中插入内容，没有内容就不能设置样式
            可以设置空的内容，然后给空的内容设置样式*/
            display: inline-block;
            /* 转换为行内块元素 
            行内元素：不独占一行，不可以设置宽高
            行内块元素：不独占一行，可以设置宽高
            块元素：一定独占一行，可以设置宽高*/
            width:30px;
            height: 30px;
            background-color: aqua;  
        }
        /* p:before   p::before  均可使用，没有区别*/