2020-08-07-伪元素处理文字用

最新推荐文章于 2022-11-28 16:55:07 发布

无敌防风镜

最新推荐文章于 2022-11-28 16:55:07 发布

阅读量360

点赞数

分类专栏： html 文章标签： css

本文链接：https://blog.csdn.net/csdnbian/article/details/107872551

版权

html 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

伪元素简介

是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。

伪元素使用==::==开头

伪元素的属性

:: before 标签的最前边（相当于p与黑的中间）
:: after 标签的最后边（相当于摧与/p的中间）
前两个标签有大用处，不能单独使用，与content联合使用
:: selection 表示选中的内容会改变样式
:: first-letter 表示第一个字母
:: first-line 表示第一行（都是跟随浏览器动态改变的）

实例

//css......
//`before`
 p::before{
        content : '文章开头';     //注意`单引号`
        color: brown;
        font-size: 30px;
    }
    //`first-letter`
    div::first-letter{
        font-size: 30px;
        color: chartreuse;
    }
   // `first-line`
    div::first-line{
        background-color: cornflowerblue;


    }
   // `selection`
    div::selection{
        color: blue; 
        font-size: 50px;      //颜色会改变，`大小不会变`
    }
html......
<body>
    <h1>雁门太守行</h1>
    <p>黑云压城城欲摧</p>
    <div>角声漫天秋色里<br>
        角声漫天秋色里
    </div>

</body>

结果

在这里插入图片描述

无敌防风镜

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
2020-08-07-伪元素处理文字用

伪元素简介是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。伪元素使用==::==开头伪元素的属性:: before 标签的最前边（相当于p与黑的中间）:: after 标签的最后边（相当于摧与/p的中间）前两个标签有大用处，不能单独使用，与content联合使用:: selection 表示选中的内容会改变样式:: first-letter 表示第一个字母:: first-line 表示第一行（都是跟随浏
复制链接

扫一扫

专栏目录