伪元素的使用

最新推荐文章于 2023-06-30 15:46:34 发布

蓝色清晨_

最新推荐文章于 2023-06-30 15:46:34 发布

阅读量844

点赞数

伪元素：之所以被称为”伪元素”，是因为它们不是真正的页面元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素展现出来的，实际上是css样式展现的行为，因此被称为伪元素。

常见的伪元素有： :berfore 、:after、:first-line、:first-letter…

:before 和 :after 的特点
伪元素是通过样式来达到元素效果的，也就是说伪元素不占用 dom 元素节点

伪元素不属于文档，所以 js 无法操作它
伪元素属于主元素的一部分，因此点击伪元素触发的是主元素的click事件

伪元素的优缺点
- 优点
* 减少 DOM 节点数
* 让 css 帮助解决部分 js 问题，让问题变得简单
- 缺点
*不利于 SEO
*无法审查元素，不利于调试

:before 和 :after常见使用场景
1.清楚浮动
2.利用 attr() 来实现某些动态功能
3.与 counter() 结合实现序号问题
4.特效使用

案例：
1.伪元素的使用 - 在元素前后插入文本信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素的使用 - 在元素前后插入文本信息</title>
</head>
<style>
    #evergrand{
        color:#425066;
    }
    #evergrand::before{
        content:"广州";
    }
    #evergrand::after{
        content:"是中超的一家足球俱乐部";
    }
</style>

<body>

    <span id="evergrand">恒大</span>

</body>
</html>

本文翻译自：https://www.cnblogs.com/lvjiaqin/p/6555931.html

蓝色清晨_

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
伪元素的使用

伪元素：之所以被称为”伪元素”，是因为它们不是真正的页面元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素展现出来的，实际上是css样式展现的行为，因此被称为伪元素。常见的伪元素有： :berfore 、:after、:first-line、:first-letter…:before 和 :after 的特点伪...
复制链接

扫一扫