修改after样式_理解:Before和:After伪元素
CSS样式表的主要作用是修饰Web页面上的HTML标记,但有时候,为了实现某个效果而往页面里反复添加某个HTML标记很繁琐,或者是显得多余,或者是由于某种原因而做不到。这就是CSS伪元素(Pseudo-Element)可以发挥作用的地方,所谓‘伪元素’,就是本身不存在的页面元素,HTML代码里并没有这样的元素,但在页面显示时,你却能看到这些本来不存在的元素发挥着作用。
观看演示
之前我们曾简要的介绍过一些关于伪元素(Pseudo-Element)的文章,下面我们要详细的再说一下。
事实上,伪元素在CSS里是一系列的元素,比如:first-line, :first-letter, ::selection, :before 和 :after,但在本文中,我们将只讲解 :before 和 :after 这两个。让我们先了解一下这种技术的基本知识。
伪元素语法
早在CSS1里就已经有了伪元素的概念,但我们今天要说的 :before 和 :after 这两个伪元素,是在CSS2.1里新出现的。起初,伪元素的前缀使用的是单冒号语法,但随着Web的进化,在CSS3的规范里,伪元素的语法被修改成使用双冒号,成为::before & ::after – 这个样子,用来跟“伪类(pseudo-classes)”区分开,(例如 :hover, :active, 等)。
浏览器对伪元素的支持
然而,不论你使用单冒号还是双冒号语法,浏览器都能识别。因为IE8只支持单冒号的语法,所以,如果你想兼容IE8,保险的做法是使用单冒号。
:before和:after伪元素能干嘛?
简言之,这两个伪元素会在真正页面元素之前和之后插入一个额外的元素,从技术角度上讲,它们与下面的HTML标记是等效的。
:before 这里是真正元素的内容:after
在Web页面的HTML源代码里,你实际上找不到它们,但从视觉上,你却能看到它们的存在,所以我们用这个“伪”字就是表示它们假元素。
:before和:after伪元素的用法
:before和:after伪元素的用法十分简单;下面的代码样例中, :before 和 :after 将会在 blockquote元素之前和之后插入新内容,它使用content属性,也就是在内容上进行操作。
下面的代码中一个引号标记将出现在blockquote元素的之前和之后。
blockquote:before {content: open-quote;}blockquote:after {content: close-quote;}
:before和:after伪元素的CSS样式
:before和:after虽然是伪元素,但它们所有用法和行为表现和真正的元素几乎完全一样;我们可以对它们进行任何的CSS样式设置,例如,改变它们的前景颜色,增加背景色/图,调整字体大小,调整对齐方式等等。
blockquote:before {content: open-quote;font-size: 24pt;text-align: center;line-height: 42px;color: #fff;background: #ddd;float: left;position: relative;top: 30px;}blockquote:after {content: close-quote;font-size: 24pt;text-align: center;line-height: 42px;color: #fff;background: #ddd;float: right;position: relative;bottom: 40px;}
:before和:after伪元素宽度和高度设置
:before和:after伪元素在页面中生成的元素在缺省情况下是“内联(inline)”元素,如果我们想指定它们的高度和宽度,需要首先定义它们为一个block元素,使用display: block;。
blockquote:before {content: open-quote;font-size: 24pt;text-align: center;line-height: 42px;color: #fff;background: #ddd;float: left;position: relative;top: 30px;border-radius: 25px;/** 定义成 block 元素 **/display: block;height: 25px;width: 25px;}blockquote:after {content: close-quote;font-size: 24pt;text-align: center;line-height: 42px;color: #fff;background: #ddd;float: right;position: relative;bottom: 40px;border-radius: 25px;/** 定义成 block 元素 **/display: block;height: 25px;width: 25px;}
给:before和:after伪元素添加背景图/背景色
我们不仅可以设置content的文字内容,而且可以给它添加图片和背景图片。尽管content 属性直接支持url()语法来插入一个图片,但在大多数情况下,我们更常用的是使用background属性来控制图片的显示。
blockquote:before {content: " ";font-size: 24pt;text-align: center;line-height: 42px;color: #fff;float: left;position: relative;top: 30px;border-radius: 25px;background: url(images/quotationmark.png) -3px -3px #ddd;display: block;height: 25px;width: 25px;}blockquote:after {content: " ";font-size: 24pt;text-align: center;line-height: 42px;color: #fff;float: right;position: relative;bottom: 40px;border-radius: 25px;background: url(images/quotationmark.png) -1px -32px #ddd;display: block;height: 25px;width: 25px;}
然而,你也看到了,在上面的代码片段中,我们仍然声明了content属性,并设置它的值为空字符串。这个content属性,在这里是必须的,如果没有它,这些伪元素将不能正常显示。
将:before和:after伪元素和伪类(pseudo-classes)混合使用
尽管伪元素和伪类是不同的东西,但我们可以将它们在同一个CSS规则里混合使用,例如,如果你想要这样的一个效果:当鼠标移动到blockquote元素上时,由伪元素生成的“引号”的颜色变深,下面的代码就可以达到这样的效果。
blockquote:hover:after, blockquote:hover:before {background-color: #555;}
增加变化的过渡效果
我们甚至可以使用 transition 属性来创建一个优雅的颜色过渡效果。
transition: all 350ms;-o-transition: all 350ms;-moz-transition: all 350ms;-webkit-transition: all 350ms;
观看演示
目前大多数浏览器(火狐,谷歌浏览器,IE11)都支持伪元素的这种用法,但IE8/6肯定是不支持这些伪元素的特殊用法的,但随着使用这种老式浏览器的用户越来越少,我们就可以普遍使用这些最先进的CSS的伪元素用法,让web页面变得更漂亮,让Web用户体验更加愉悦。
修改after样式_理解:Before和:After伪元素相关推荐
- CSS:理解:Before和:After伪元素
CSS样式表的主要作用是修饰Web页面上的HTML标记,但有时候,为了实现某个效果而往页面里反复添加某个HTML标记很繁琐,或者是显得多余,或者是由于某种原因而做不到.这就是CSS伪元素(Pseudo ...
- element 修改分页样式_如何给wordpress网站的文章列表,添加分页效果?可以通过2种方式...
在上一章节中,我们为wordpress网站的首页添加了全站文章列表.一个wordpress网站不可能只有几篇文章,可能会有成千上万的文章,作为一个wordpress博客主题模板,一般情况下,不可能让所 ...
- [JS 分析] 汽_车_之_家 JS 生成 CSS 伪元素 hs_kw44_configUS::before
0.参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements https://developer.mozilla.org/ ...
- 伪元素控制网页表单样式
当开发web应用程序时,表单样式是个头疼的问题.以前,web开发人员不得不接受一个现实,就是由客户端浏览器控制表单样式.然而,作者通过伪元素给web渲染引擎添加钩子,就可以控制表单的显示. 然而,所有 ...
- js来控制、修改CSS伪元素的方法
例如,我的样式表有以下规则,需要把伪元素的content内容进行修改 <style>p:after{content:'after伪元素'} </style> <p id= ...
- 理解css伪类和伪元素
伪类就是可以通过直接添加一个类样式达到同等效果,而伪元素,则需要先添加一个元素,然后在元素上添加样式才能达到同等效果 伪类 :active 向被激活的元素添加样式. :focus 向拥有键盘输入焦点的 ...
- css伪元素实现 小圆点 样式——css基础积累
最近在做后台管理系统,遇到一个需求,需要在菜单中添加一个小圆点样式.此时可以通过css伪元素样式来实现. .parent-node {font-size: 14px;color:#999999;&am ...
- css嵌入样式元素,css伪元素怎么用在内嵌样式?
css伪元素可以直接在内嵌样式中使用,使用语法为:<style>选择器:pseudo-element{属性名:属性值;}</style>.然后直接通过选择器即可使用伪元素. 伪 ...
- vue移除伪元素_获取伪元素的属性和改变伪元素的属性
获取伪元素的属性值 获取伪元素的属性值可以使用window.getComputedStyle()方法,获取伪元素的CSS样式声明对象.然后利用getPropertyValue方法或直接使用键值访问都可 ...
最新文章
- MegaRAID阵列卡配置RAID阵列 - WebBIOS - CLI
- Pytorch的网络结构可视化:Netron与TensorBoardX
- boost::type_erasure::negatable相关的测试程序
- cf 1511 D. Min Cost String
- 通用职责分配软件原则之1-信息专家原则
- 马斯克再次进行新冠病毒检测 预计今天出结果
- CentOS7安装MySQL 8.0安装
- 华硕台式计算机编号,怎么查看华硕电脑设备序列号
- JJ斗地主记牌器java开发,【欢乐斗地主记牌器制作】遇到两个问题
- 走好数据中台最后一公里,为什么说数据服务API是数据中台的标配?
- 初中数学抽象教学的案例_初中数学数形结合思想教学研究与案例分析
- FIR 滤波器参数意义
- Linux重置root 密码
- GE PLC的EGD协议通信
- 人生苦短,使用百度云SDK,编写python代码调用接口的车牌识别
- 【原创】RPA在BPO领域的场景分享-中科云创CEO每日分享
- (PMP)三、项目经理的角色
- CSAPP学习笔记 day1
- Python中flatten用法
- 多个表左连接LEFT JOIN