使用::befor和::after伪元素在网站中添加图标

最新推荐文章于 2023-12-07 16:16:53 发布

多学多问

最新推荐文章于 2023-12-07 16:16:53 发布

阅读量952

点赞数 4

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

原文链接：https://www.cnblogs.com/yaotome/p/9322814.html

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

常见伪类——:hover,:link,:active,:target,:not(),:focus。

常见伪元素——::first-letter,::first-line,::before,::after,::selection。

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

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

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

举例：网站有些联系电话，希望在它们前加一个icon☎，就可以使用:before伪元素，如下：

<!DOCTYPE html>
<meta charset="utf-8" />
<style type="text/css">
    .phoneNumber::before {
    content:'\260E';
    font-size: 15px;
}
</style>
<p class="phoneNumber">12345645654</p>

这些特殊字符的html，js和css的写法是不同的

以上资料来源于 https://www.cnblogs.com/yaotome/p/9322814.html 博主所写本人仅此作为笔记便于查看

多学多问

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
使用::befor和::after伪元素在网站中添加图标

css3为了区分伪类和伪元素，伪元素采用双冒号写法。常见伪类——:hover,:link,:active,:target,:not(),:focus。常见伪元素——::first-letter,::first-line,::before,::after,::selection。::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。所以不要用:before
复制链接

扫一扫