学习前端的第七天

hp200105

于 2022-09-01 21:01:01 发布

阅读量38

点赞数

文章标签：学习前端

本文链接：https://blog.csdn.net/hp200105/article/details/126650613

版权

一，伪元素

区别：

元素：HTML设置的标签

伪元素：由css模拟出的标签效果

伪元素	描述
::first-letter	给文章的首字符进行设置
::first-line	给文章的第一行进行设置
::selection	给选中的内容进行设置
::before	给父元素内容最前面添加文字
::after	给父元素内容的最后文字

需要注意：

必须设置content属性才能生效
伪元素默认是行内元素
伪元素可以创建一些文档语言无法创建的虚拟元素。

比如：文档语言没有一种机制可以描述元素内容的第一个字母或第一行，但伪元素可以做到(::first-letter、::first-line)。
同时，伪元素还可以创建源文档不存在的内容，

比如使用 ::before

   <style>
        ul li::before{
        content:"一个";
        padding-left: 8px;
        color: #424242;
        }
        li{
            list-style: none;
        }
   </style>
</head>
<body>
    <ul>
    <li>苹果</li>
    <li>鸡蛋</li>
    <li>香蕉</li>
   </ul>
    
</body>

结果就是