分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

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

发布时间:2023-09-06 02:04责任编辑:胡小海关键词:暂无标签

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的写法是不同的 

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

原文地址:https://www.cnblogs.com/yaotome/p/9322814.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved