css 伪元素选择器例子

最新推荐文章于 2024-10-31 14:03:24 发布

asiaqi

最新推荐文章于 2024-10-31 14:03:24 发布

阅读量120

点赞数

分类专栏： asiaqi每日打卡 CSS 文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_62200674/article/details/126167207

版权

asiaqi每日打卡同时被 2 个专栏收录

17 篇文章 2 订阅

订阅专栏

CSS

11 篇文章 0 订阅

订阅专栏

[[CSS选择器]]

E::first-letter文本的第一个单词或字（如中文、韩文、日文等）
E::first-line文本第一行
E::selection可改变选中文本中的样式
E::before和E::after 在E元素内部的开始位置和结束位置创建一个元素，该元素为行内元素，且必须要结合content属性使用

::first-letter伪元素选择器展示：

    <style>

        p::first-letter {

            font-size: 50px;

        }

    </style>

(下方文本空格是为了文章显示方便而添加)

<body>
    <p>Do you want a friend whom you could tell everything to, 
    like your deepest feelings and thoughts? 
    Or are you afraid that your friend would laugh at you,
     or would not understand what you are going through? 
    Anne Frank wanted the first kind, 
    so she made her diary her best friend.</p>
</body>

::first-letter

这种效果在很多英文文章排版内见得到。

::selection伪元素选择器展示：

代码编写是类似的，主要展示一下这个酷酷的效果。

当鼠标选中部分内容时，文字变成样式设定的效果。
::selection

::before和::after伪元素选择器展示：

 p::before {

  content: "添加在前";

  color: lightblue;

}

p::after {

  content: "添加在后";

  color: pink;

}

HTML中内容同上例

::before ::after

注意： 由::before 和::after 生成的伪元素包含在元素格式框内，因此不能应用在替换元素上

后记

前段时间各种旅游啦，回来继续打卡，第16天！

asiaqi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

css 伪元素选择器 例子

::first-letter伪元素选择器展示：

::selection伪元素选择器展示：

::before和::after伪元素选择器展示：

后记

css 伪元素选择器例子