html 伪元素作用,:before,:after伪元素妙用
本文作者:IMWeb 黎清龙
未经同意,禁止转载
这两个伪元素分别表示元素内容的【前】【后】,利用这两个伪元素可以在元素内容的前后添加内容,其实这没有什么前后的概念,如果应用了absolute的特性之后,你可以把这些伪元素放在任何位置,有了这两个伪元素,就代表每个元素都有两个助手可供使用,灵活运用它们的话将会得到很多有趣的实现,简化许多实现。
伪元素特性(目前已经遇到的)
它不存在于文档中,所以js无法操作它
它属于主元素本身,有些伪类仅仅是代表元素内容的一部分,譬如:first-letter代表第一个字母;因此当伪元素被点击的时候触发的是主元素的click事件
块级元素才能有:before, :after,譬如img就不能设置,亦即某些元素是没有:before, :after的,只要知道一般的块级元素都可以用就行了
注:css3中,为了与伪类区分,伪元素前应该使用两个冒号,即:hover伪类,::before伪元素。当然为了向下兼容,用一个冒号也是可以的,不过建议尽量使用规范的写法。
各种图标
利用这两个伪类,可以实现需要简单的图标,例如搜索的放大镜,叉叉,箭头等等
//视频播放图标
.course[data-type="2"] {
.course__cover {
&:before, &:after {
content: '';
display: block;
position: absolute;
left: 5px;
bottom: 5px;
}
&:after { //实现圈圈
width: 20px;
height: 20px;
border: 2px solid white;
background: rgba(0, 0, 0, .6);
border-radius: 12px;
background-clip: padding-box;
}
&:before { //实现三角形
height: 0;
width: 0;
border-left: 8px solid white;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
margin-left: 9px;
margin-bottom: 7px;
z-index: 5;
}
}
}
上述图标的效果如下图:
扩大可点区域
在mobile,特别是小屏手机,可点区域一般需要大一点,这样对用户友好一点。
当主元素实在没办法扩大自身的时候,可以利用:before, :after来实现可点区域的扩大,还记得伪元素的特性之一,伪元素属于主元素,点伪元素就是点击主元素。
//利用这个样式可以把可点区域扩大为40px宽,高度原理一样
&:before {
content: "";
display: block;
position: absolute;
width: 40px;
left: 50%;
margin-left: -20px;
top: 0;
height: 50px; //随便
}
实现效果如下图:
这个算是个综合例子,应用了多种技巧。这是一个收藏按钮,两种状态:已收藏和未收藏,正好符合checkbox,因此应用了checkbox,修改了样式给了一个底图。然后下面的文字是:after,利用了动态label的技巧(详见1.4),然后:before应用了扩大可点区域技巧,使得40*50的区域内点击都有效。
实现label
对于一些静态的文字,说明性的文字,譬如最常见的上图下字单元,完全可以用:after实现那个文字。
还记得form家族的label标签吗?它的特性是label和input的联动,点击label元素就等同于点击input,这个效果和伪元素的特性是一模一样的,用:before完全可以替代label。
唯有一点是label独有的,就是label元素和input元素的位置相距较远,这种联动是伪元素无法实现的,毕竟伪元素还是要围绕主元素存在的,远距离absolute将会引发灾难的。
.empty__bg {
display: inline-block;
width: 95px;
height: 92px;
background: url(../../img/bg_empty_center@2x.png) no-repeat;
background-size: 95px 92px;
position: relative;
margin-bottom: 16px; //注意这里需要留好位置放置after元素(它是absolute进去的)
&:after {
content: "暂无学习计划";
display: block;
font-size: 14px;
line-height: 24px;
text-align: center;
width: 100%;
color: #909090;
position: absolute;
top: 100%;
left: 0;
}
}
实现效果如下图:
实现动态信息
如果你认为伪元素只能实现静态label,那就把CSS3想得简单了。
:before, :after的content属性的值除了是静态字符串之外,还有其他的一些特殊值,其中一个是attr(...),这个特性的作用是用主元素的某个属性的值作为content的值,当这个属性的值改变的时候,伪元素的值也会跟着改变,利用这个特性就可以实现动态信息了。
可以有两种动态方案:
用js动态修改主元素的属性值,这个很直观
修改伪元素content关联的属性
下面看一个例子:
//html:
//22
//
23
//24
//core css
.datepicker__link {
&:before {
content: attr(data-monthStr);
}
&.z-active {
&:before {
content: attr(data-weekStr);
}
}
}
实现的效果如下图:
这里用到第二种动态方案,日期列表里面,日期上面默认显示月份信息,但是选中态需要显示星期信息。
预先把每个单元用到的月份信息和星期信息放到主元素的data属性上面(缓存的思想),选中的时候一般都是要添加一个选中态样式,这时,除了基本的凸显性样式外,同时切换伪元素关联的data属性即可轻松地解决这个问题,而不用通过js去找到label元素,然后修改text。
小结
伪元素帮助我们选择那些有特殊意义,但是却无法具体定位的“东西”,它们对这些“东西”不做任何限制,它们只是代表这些特殊意义,譬如:first-letter,不限制首字母是哪一个字母,只是代表了首字母元素。
通过伪元素,可以让CSS更好的处理一些有特殊意义的元素,这些元素一般很难定位,甚至有些是代表状态的元素,譬如:target。
结合伪元素的特点,利用它们的灵活性,可以为我们提供更多的特性,下面总结一下目前想到的伪元素的优缺点:
优点/用途
减少dom节点数
让css帮助解决一部分js问题,让问题变得简单
缺点
不利于SEO
代码读起来“可能”会有疑惑
html 伪元素作用,:before,:after伪元素妙用相关推荐
- CSS复合选择器( 交集、 并集、后代、子元素、兄弟、伪类、伪元素)
CSS复合选择器 总结 复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签. :first-child与:first-of-type区别 :fi ...
- html伪类选择器Before,css3 伪元素和伪类选择器详解
伪类选择器:CSS中已经定义好的选择器,不能随便取名 常用的伪类选择器是使用在a元素上的几种,`如a:link|a:visited|a:hover|a:active` 提示:在 CSS 定义中,a:h ...
- html css子标签,HTML+CSS系列:CSS选择器(标签、ID、类、通配符、后代、子元素、并集、伪类)...
一.标签选择器 Document h1 { color: red; } h2{ color: green; } Hello World! Hello World! Hello ! Hello ! 二. ...
- html中鼠标移走的伪元素,a标签的伪元素的应用——link,hover,visited,active
a标签应用中,一般有四个状态: 鼠标未移入前(link),鼠标移入时(hover), 鼠标点击时(active),鼠标点击后(visited). body{ padding: 200px 0; } a ...
- 随元素而来,随元素而去,变一变样式,深藏功与名——论伪元素
大家好,这里是笑颜の行方. 本篇描述的是页面中一种神奇的存在--伪元素. 在CSS中有这样两个存在: :before 和 :after 如何使用呢?这需要满足一些条件. 我们先定义一段文本: < ...
- html伪类元素加图片,CSS伪类选择器:before、:after使用:插入字符、插入图片、插入项目编号...
before: 伪元素选择器用于在某个元素之前插入一些内容 伪类选择器:before使用content属性插入字符.属性插入图片 css3 .p_before:before { content: 'H ...
- 【伪类与伪元素】用CSS伪元素(以:before为例)插入图片
[伪类与伪元素]用CSS伪元素(以:before为例)插入图片 对于一些小图标类型的图片,若使用<img>略微有些麻烦,iconfont是一个不错的选择用起来也相当灵活,但是所需要步骤较为 ...
- Web前端线上系统课-01-HTML+CSS/08-结构伪类-图形-字体-字体图标-元素定位
结构伪类-图形-字体-字体图标-元素定位 结构性伪类选择器 nth-child 父元素中的第n个子元素 nth-child(n) <!DOCTYPE html> <html lang ...
- css多个伪元素,使用CSS伪元素控制连续几个元素的样式方法
用CSS伪元素控制元素的时候经常性的需要改变一些元素的样式,网上有许多博客都说了如何去控制一个的改变,但是我在实际写的过程中,发现更多时候是需要控制多个连续元素的改变. 使用伪元素去控制(以:hove ...
- css3伪类做三角型,css伪元素写三角形
先说伪元素和伪类的区别: 伪类是针对CSS,而伪元素是针对HTML,伪类选择器是CSS选择器的一种,而伪类是"假"的HTML标签 伪类(选择器)本质上是为了弥补常规CSS选择器的不 ...
最新文章
- linux安装vi 插件,Ubuntu上Vim安装NERDTree插件的详细操作步骤
- JAVA层HIDL服务的获取原理-Android10.0 HwBinder通信原理(九)
- Vue报错bash: vue: command not found或者vue ui没有反应:官方修改成新的命令了
- 实验图文详解——apache的编译安装及httpd服务开机自启
- 单片机与gsm通信c语言,gsm模块如何与单片机通信?
- 【牛客 - 210A】游戏(思维,脑洞)
- 复杂电路简化经典例题_【中考物理】电路简化的10大原则和7大步骤
- Spring Boot 2.2 正式发布,大幅性能提升 Java 13 支持 | CSDN 博文精选
- oracle初学心得(转)
- 国考报名显示服务器繁忙,公益性岗位考试内容-面试:牢记服务初心,让海关面试作答更具温度...
- 火狐扩展Firefox extension开发流程(学习记录)
- 校招笔试、面试六十题
- Unity3D游戏高性能战争迷雾系统实现
- CTGU实验6_2-创建借书存储过程
- html5 red5,一个基于red5+flash的网络聊天室red5Chat
- 谷歌刷新纪录:将圆周率精确到了小数点后31万亿位,光存储就占了几个大硬盘!
- 郭博绘制的类似modbus的处理机制
- yu bie diu
- 用计算机表白的数字,用数字表白的暗语
- 2020中国上市公司品牌价值榜20强发布
热门文章
- Windows XP 所提供的键盘快捷键
- 1、XML 简介,2、JSON 教程
- 29.日志路由组件(2)
- 35. 后台模块开发(2)
- 16. Shell scripts
- css定位position,absolute relative两种情况下,top,left,right,bottom的区别
- 表单从gb2312的页面提交到utf-8页面,或者表单从utf-8的页面提交到gb2312页面的解决办法...
- MySQL视图和事务
- Splay模板 1.0
- 控制台应用程序的Main方法