四种伪元素和::before,::after的使用

最新推荐文章于 2024-05-10 00:53:46 发布

qq_40322724

最新推荐文章于 2024-05-10 00:53:46 发布

阅读量559

点赞数

分类专栏： HTML 文章标签： html html5 css3

本文链接：https://blog.csdn.net/qq_40322724/article/details/105863663

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

共有四种伪元素：

一般伪元素可以写成两种，::first-letter，:first-letter因为单:和伪类一样，所以伪元素一般推荐写成::first-letter双冒号形式，用于区分。

::first-letter

用于针对第一个首字母设置属性，只有下列属性可以应用：
字体属性，margin属性，padding属性，border属性，颜色属性，背景属性等

::first-line

针对文本首行进行设置

::before,::after

::before,::after用于在一个元素之前或之后插入其他内容

<style>
        .z1::before{
            content: '11';
            color: red;
        }
        .z1::after{
            content: '11';
            color: red;
        }
        
         
    </style>
</head>
<body>
        <div class="z1">安监局</div>
</body>

在z1前和后添加11

其中的content:’'是不能省略的，原则上来说，::before,::after伪类相当于行内元素。同样可以用::after来清除元素浮动

在使用浮动进行布局的时候会需要一个块级元素（行内元素无效）来设置clear属性，如果浮动元素下方本来就有元素，那我们可以直接对该元素设置 clear:both ，若没有其他元素需要展示，我们往往会写一个空白标签来清除浮动

<div style="clear:both"></div>

但是这样无疑会增加浏览器的渲染负担，所以考虑使用伪元素:after来代替这个空白标签，因为清除浮动需要在浮动元素后面，f所以不可以使用 :before 要使用::after

#content:after{content:"";display:block;clear:both;}

因为默认是行内元素，通过display:block 成为块级元素，在用clear:both清除浮动

qq_40322724

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
四种伪元素和::before,::after的使用

共有四种伪元素：一般伪元素可以写成两种，::first-letter，:first-letter因为单:和伪类一样，所以伪元素一般推荐写成::first-letter双冒号形式，用于区分。::first-letter用于针对第一个首字母设置属性，只有下列属性可以应用：字体属性，margin属性，padding属性，border属性，颜色属性，背景属性等::first-line针对文本首...
复制链接

扫一扫