CSS中四个主要的伪元素选择器

最新推荐文章于 2024-04-16 12:23:43 发布

紫色小衬衣

最新推荐文章于 2024-04-16 12:23:43 发布

阅读量1.9k

点赞数

分类专栏：前端技术 CSS3 文章标签： CSS3

本文链接：https://blog.csdn.net/weixin_44091430/article/details/88989646

版权

前端技术同时被 2 个专栏收录

8 篇文章 1 订阅

订阅专栏

CSS3

2 篇文章 0 订阅

订阅专栏

伪元素选择器

伪元素就是假象的元素，并不存在DOM树中，无法捕获，也无法绑定事件。

常用的伪元素

::first-line

用于向某个元素的第一行添加样式

<style>
	p::first-line{
		color: yellowgreen;
	}
</style>
<body>
        <p>
            撒旦哈德啥的吧扣税的板卡设计的巴萨尽快<br/>
            asdjashdjklasjhdasdasjdhsjadhasjkdhasjkdhsadhk
        </p>
    </body>

效果图如下：

::first-letter

用于向某元素的第一个英文字母或第一个汉字添加样式

<style>
	 p::first-letter {
        color: red;
        font-size: 25px;
     }
</style>
<body>
        <p>
            撒旦哈德啥的吧扣税的板卡设计的巴萨尽快<br/>
            asdjashdjklasjhdasdasjdhsjadhasjkdhasjkdhsadhk
        </p>
    </body>

效果图如下：
在这里插入图片描述

::before

用于向某个元素内容前追加内容

<style>
	 li::before{
        content: 'before';
        color:red;
      }
</style>
<body>
       <ul>
            <li>asdasdasd</li>
        </ul>
    </body>

效果图如下：
在这里插入图片描述

::after

用于向某个元素内容前追加内容

<style>
	 li::after{
        content: 'after';
        color:blue;
      }
</style>
<body>
        <ul>
            <li>asdasdasd</li>
        </ul>
</body>

效果图如下：
在这里插入图片描述

紫色小衬衣

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS中四个主要的伪元素选择器

伪元素选择器伪元素就是假象的元素，并不存在DOM树中，无法捕获，也无法绑定事件。常用的伪元素::first-line用于向某个元素的第一行添加样式<style> p::first-line{ color: yellowgreen; }</style><body> <p> 撒旦哈德啥的吧扣税...
复制链接

扫一扫