HTML中 :before 和 :after 的用法

最新推荐文章于 2024-07-11 21:11:19 发布

德曲

最新推荐文章于 2024-07-11 21:11:19 发布

阅读量6.5k

点赞数 1

文章标签： html css html5

本文链接：https://blog.csdn.net/qq_51507950/article/details/124747420

版权

本文介绍了HTML中的:before和:after伪元素的使用，包括在元素前后添加内容、清除浮动、制作小三角形图标以及构建对话框等应用场景。通过这些技巧，可以提升网页设计的灵活性和效率。

摘要由CSDN通过智能技术生成

1. :before 和 :after 的主要作用是在元素内容前后加上指定内容，示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p::before {
            content: "你好，";
        }

        p::after {
            content: "!!!"

        }
    </style>
</head>

<body>
    <p>火星人</p>
</body>

</html>

效果如图：

以上代码是:before和:after的基本用法，但是这两种伪类还有很多更方便的用法。

2. ：after清除浮动

元素设置浮动以后，其父元素以及父元素的兄弟元素的布局都会受到影响，如父元素的背景边框（如宽度，高度，背景颜色）不能正常显示，父元素的兄弟元素位置布局错误等，

为了避免这种浮动带来的影响必须要清除浮动，:after就是其中的一种方法。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-s

最低0.47元/天解锁文章

德曲

关注

1
点赞
踩
20

收藏

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

1. :before 和 :after 的主要作用是在元素内容前后加上指定内容，示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wi.
复制链接

扫一扫