详解 CSS 属性 - :before && :after
来源:互联网 发布:网络平台营业执照 编辑:程序博客网 时间:2024/06/06 08:56
详解 CSS 属性 - :before && :after
现在我们经常在 html
源码中看到如下的写法:
这里的 ::after
和 ::before
就是我们今天来探讨的 css
伪元素之二 -:before && :after
。
伪元素
首先我们要明白什么是伪元素,css
设置伪元素是为了方便给某些选择器添加特殊的效果。伪元素的语法格式一般为:
selector.class:pseudo-element {property:value;}
伪元素就是这样通过赋值给自己属性从而给指定的选择器添加上样式的效果。
:before
如同对伪元素的名称一样,:before
是用来给指定的元素的内容前面插入新的内容。举例说明:
.before:before{content:'you before'; display:block; color:red;}<div class="before"> me</div>
现在我们再来看下效果:
//由伪元素:before
生成新内容区域果然变为了块元素
content 属性
对于伪元素 :before
和 :after
而言,属性 content
是否为必选项呢?我们尝试把content
移除。
.before:before{content:''; display:block; color:red;}<div class="before"> me</div>
//新内容依然为空
//此时:before
生效
所以我们明白,对于伪元素 :before
和 :after
而言,属性 content
是必须设置的,那么在上面的例子,我们知道属性的值可以为字符串,那么还可以为其他形式吗?答案是可以的,它还可以是指向一张图片的URL
:
.before:hover:before{content:'you before'; color:red;}<div class="before"> me</div>
//无内容
//鼠标移至div
上时,新内容出现。
这里需要注意两者使用的顺序,伪元素应该位于后面,如果顺序改为 .before:before:hover
是无效的。
配合取值函数 attr() 使用
还有一种较为常见的用法,即配合取值函数 attr()
一起使用,如:
a::before{content: attr(title)}<a href="http://www.segmentfault.com" title="专业面向开发者的中文技术问答社区"></a>
此时达到的效果相当于:
<a href="http://www.segmentfault.com">专业面向开发者的中文技术问答社区</a>
:after
伪元素 :after
与 伪元素 :before
类型相同,只不过它指定的属性 content
值为出现在指定元素内容的后面,同样举例说明:
.after:after{content:'after you'; color:#F00;}<div class="after">I </div>
//伪元素:after
生成的新内容区域出现在指定元素内容的而后面
:after
其他特征与 :before
一致,可以参考上文,在此就不赘述。
- 详解 CSS 属性 - :before && :after
- CSS 属性 - :before && :after
- css属性:before :after伪类
- CSS:before和after中的content属性
- css中的before,after
- css :before :after
- CSS :before 和 :after
- CSS ::before 和 ::after
- CSS: :before/:after
- CSS content 属性以及 :before和 :after 伪元素
- css伪元素:before和:after用法详解
- css中的:before 和 :after
- CSS-追加内容before、after
- css :before :after伪类
- CSS 巧用 :before和:after
- 论CSS ::before 和 ::after
- CSS after before 清除float
- CSS伪元素 :before :after
- 经典排序算法(2) -插入排序 InsertSort
- c++中的前向声明
- HDOJ 1016 Prime Ring Problem素数环【深搜】
- HDU 1452 Happy 2004
- 获取栈中最小值函数,时间复杂度为O(1)
- 详解 CSS 属性 - :before && :after
- SQL syntax; check the manual that corresponds to your MariaDB server version for the right syntax
- 通过execve在两个进程间传递环境变量
- Flexpaper的参数解释
- C++课堂学习笔记
- 第一篇CSDN blog
- SSM入门笔记01
- 蓝桥杯 历届试题 敢死队
- 微信测试号Scope参数列表错误或没有Scope权限