jquery伪元素 css伪元素

文章目录

• 前言
• css伪元素

• 一. 作用
• 二.列举

• 2.1"::first-line"
• 2.2“::fist-letter”
• 2.3"::before"
• 2.4 "::after"伪元素
• 2.5"::selection"伪元素

• 总结

---

前言

在某些时刻，可以给你的元素增加你想要的内容，或者呈现出你想要的样式，那么我们就唠唠CSS中的伪元素，话不多说，走起~~~

---

css伪元素

一. 作用

用于设置元素指定部分的样式，如 ”after“ 用于在元素之后插入一些内容，“before” 则是在元素之前插入一些内容

二.列举

伪元素有：“::after”,"::before",“first-letter”,“first-line”,"::selection"这几个

详细接下：

2.1"::first-line"

::first-line 伪元素用于向文本的首行添加特殊样式。

例：

HTML

<p>
         中国专业IT社区CSDN (Chinese Software Developer Network) 创立于1999年，致力于为中国软件开发者提供知识传播、在线学习、职业发展等全生命周期服务。
        旗下拥有：专业的中文IT技术社区： CSDN.NET；移动端开发者专属APP： CSDN
        APP、CSDN学院APP；新媒体矩阵微信公众号：CSDN资讯、程序人生、GitChat、CSDN学院、AI科技大本营、区块链大本营、CSDN云计算、GitChat精品课、人工智能头条、CSDN企业招聘；IT技术培训学习平台：
        CSDN学院；技术知识移动社区： GitChat；IT人力资源服务：科锐福克斯；高校IT技术学习成长平台：高校俱乐部。 [1]
    </p>

CSS

p::first-line{
            color: orange;
            font-style: italic;
        }

附：

基本的字体，颜色，背景的属性都适用于“::fist-line”伪元素

注：“::fist-line”伪元素只适用于块级元素

2.2“::fist-letter”

::first-letter 伪元素用于向文本的首字母添加特殊样式。

例：

HTML

<h1>中国人工智能产业路线图、AI技术人才成长路线图 [1]</h1>

CSS

h1::first-letter{
            font-style: italic;
        }
        h1:hover::first-letter{
            font-size: 70px;
            color: blue;
        }

字体，颜色，背景，外内边距，边框等基本属性都适用

附：

注：“::first-letter”伪元素只适用于块级元素

2.3"::before"

::before 伪元素可用于在元素内容之前插入一些内容。

例：在

HTML

<span>"::before"伪元素的效果</span>

CSS

span::before{
            display: inline-block;
            content: url(./img/uc.101.36a6202d.jfif);
        }

附：

2.4 "::after"伪元素

::after 伪元素可用于在元素内容之后插入一些内容。

例：

HTML

<div>"::after"伪元素的效果</div>

CSS

div::after{
            display: inline-block;
            width: 66px;
            height: 20px;
            content: "after";
            color: orange;
            text-align: center;
            line-height: 20px;
            border: 1px solid rgba(0, 0, 0, 0.2);
        }

2.5"::selection"伪元素

::selection 伪元素匹配用户选择的元素部分

例：

HTML

<h2 class="sel">来源 北京日报客户端 | 记者 刘柳</h2>

CSS

h2::selection{
            color: red;
        }

附：

客户端 | 记者 刘柳

color,background,cursor,outline,这些属性可以用适用

---

总结

CSS伪元素很有趣，也很有用，愿大家每天进步一点点，超越昨天的自己，最后有什么好的建议和问题，可以留言评论区ao~