::before和::after伪元素的用法

最新推荐文章于 2024-03-12 18:03:29 发布

Dariuslwk

最新推荐文章于 2024-03-12 18:03:29 发布

阅读量204

点赞数 1

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

本文链接：https://blog.csdn.net/qq_44158936/article/details/105042213

版权

DAYNOTE 专栏收录该内容

27 篇文章 3 订阅

订阅专栏

1、伪类和伪元素

css3为了区分伪类和伪元素，伪元素采用双冒号写法。

1.1、伪类

:hover
:link
:active
:target
:not()
:focus

1.2、伪元素

::first-letter
::first-line
::before
::after
::selection

::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。

这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。

所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>伪元素::before和::after示例</title>
        <style type="text/css">
            .phone_number::before{
                content:'\260E';
                font-size: 15px;
            }
            .phone_number::after{
                content:'\25BA';
                font-size: 20px;
            }
        </style>
    </head>
    <body>
	    <p class="phone_number">13697555555</p>
    </body>
</html>

在这里插入图片描述

注意：这些特殊字符的html，js和css的写法是不同的，具体可查看html特殊字符的html，js，css写法汇总。

2、content 属性

::before和::after必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空。

默认情况下，伪类元素的 display 是默认值 inline，可以通过设置 display:block 来改变其显示。

以下是content属性可取的值：

string 使用引号包一段字符串，将会向元素内容中添加字符串
attr() 通过attr()调用当前元素的属性
url()/uri() 用于引用媒体文件
counter() 调用计数器，可以不使用列表元素实现序号功能，配合counter-increment和counter-reset属性使用

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>伪元素中content属性可取的值</title>
        <style type="text/css">
            .first::before{
                content: "<";
            }
            .first::after{
                content: ">";
            }

            .second{
                background-color: red;
            }
            .second::after{
                content: attr(red);
            }

            .third::after{
                content: url("伪元素.html");
            }

            body{
                counter-reset: section;
            }
            h1{
                counter-reset: subsection;
            }
            h1:before{
                counter-increment:section;
                content:counter(section) "、";
            }
            h2:before{
                counter-increment:subsection;
                content: counter(section) "." counter(subsection) "、";
            }
        </style>
    </head>
    <body>
        <div class="first">南风知我意，吹梦至西洲</div>
        <div class="second">望庐山瀑布</div>
        <div class="third">百度一下</div>

        <h1>采菊东篱下</h1>
        <h2>悠然见南山</h2>

    </body>
</html>

在这里插入图片描述

3、使用

清除浮动
模拟float:center的效果
做出各种图形效果
不使用图片创建小图标
显示打印网页的URL
给blockquote添加引号
超链接特效
::before和::after实现多背景图片

Dariuslwk

关注

1
点赞
踩
1

收藏

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

1、伪类和伪元素css3为了区分伪类和伪元素，伪元素采用双冒号写法。1.1、伪类:hover:link:active:target:not():focus1.2、伪元素::first-letter::first-line::before::after::selection::before和::after下特有的content，用于在css渲染中向元素逻辑上的头...
复制链接

扫一扫