现在我们经常在 html 源码中看到如下的写法:

这里的 ::after 和 ::before 就是我们今天来探讨的 css 伪元素之二 - :before && :after

伪元素

首先我们要明白什么是伪元素,css 设置伪元素是为了方便给某些选择器添加特殊的效果。伪元素的语法格式一般为:

selector:pseudo-element {property:value;}

这里的 property 是指伪元素的属性。此外,css 类也可以与伪元素配合使用,格式如下:

selector.class:pseudo-element {property:value;}

伪元素就是这样通过赋值给自己属性从而给指定的选择器添加上样式的效果。

:before

如同对伪元素的名称一样,:before 是用来给指定的元素的内容前面插入新的内容。举例说明:

.before:before{content:'you before'; color:red;}

<div class="before"> me</div>

在这里我们给伪元素 :before 添加了属性 content,并赋值为 you before。我们来看效果:

 //在指定元素的内容 me 前添加了新内容 you before

我们不难发现这里通过伪元素 :before 添加的新内容区域默认的 display 属性值为 inline,那么我们可不可以修改新内容区域的属性,答案是肯定的。你可以像修改其他元素一样修改它的样式,我们来将它的 display 属性值来改为block

.before:before{content:'you before'; display:block; color:red;}
<div class="before"> me</div>

现在我们再来看下效果:

  //由伪元素 :before 生成新内容区域果然变为了块元素

content 属性

对于伪元素 :before 和 :after 而言,属性 content 是否为必选项呢?我们尝试把 content 移除。

.before:before{display:block; color:red;}
<div class="before"> me</div>

 //没有了 content 属性,新内容自然是为空的
 //同时我们查看 html 源码会发现,:before 是没有生效的

那么我们设为空呢?

.before:before{content:''; display:block; color:red;}
<div class="before"> me</div>

 //新内容依然为空
 //此时 :before 生效

所以我们明白,对于伪元素 :before 和 :after 而言,属性 content 是必须设置的,那么在上面的例子,我们知道属性的值可以为字符串,那么还可以为其他形式吗?答案是可以的,它还可以是指向一张图片的 URL:

 content: url( "img/icon.png" )

配合伪类使用

伪元素 :before 还可以配合伪类使用,这里举经常与 :before 配合使用的伪类 :hover 为例:

.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的更多相关文章

  1. 详解 CSS 属性 - position

    postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响.该属性共有5个值: position: absolute position: relative position: fixed ...

  2. 《转载》详解 CSS 属性 - 伪类和伪元素的区别

    首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...

  3. 详解 CSS 属性 - 伪类和伪元素的区别[转]

    首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...

  4. 详解 CSS 属性 - 伪类和伪元素的区别(再也不用概念盲了!!!)

    首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...

  5. 详解CSS float属性

    CSS中的float属性是一个频繁用到的属性,对于初学者来说,如果没有理解好浮动的意义和表现出来的特性,在使用的使用很容易陷入困惑,云里雾里,搞不清楚状态.本文将从最基本的知识开始说起,谈谈关于浮动的 ...

  6. 详解CSS float属性(转)

    详解CSS float属性   阅读目录 基础知识 float的详细细节 float特殊情况 clear属性 清除浮动 float的应用 总结 CSS中的float属性是一个频繁用到的属性,对于初学者 ...

  7. 详解CSS的相对定位和绝对定位(讲得很详细)

    详解CSS的相对定位和绝对定位 CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left ...

  8. 详解CSS盒模型(转)

    详解CSS盒模型   阅读目录 一些基本概念 盒模型 原文地址:http://luopq.com/2015/10/26/CSS-Box-Model/ 本文主要是学习CSS盒模型的笔记,总结了一些基本概 ...

  9. 详解CSS display:inline-block的应用(转)

    详解CSS display:inline-block的应用   阅读目录 基础知识 inline-block的问题 inline-block的应用 总结 本文详细描述了display:inline-b ...

随机推荐

  1. (easy)LeetCode 202.Happy Number

    Write an algorithm to determine if a number is "happy". A happy number is a number defined ...

  2. MFC中,如何自定义用户消息

    1.用处 在多个类之间传递消息.当需要响应用户操作,本类却无法实现时,可以向系统发出消息.然后让系统中的需要的位置实现它. 2.方法 2.1定义这个消息,并让拥有者发送这个这个消息,传递一个整型参数 ...

  3. 刻意练习,逃离舒适区——怎么样成为一个高手[罗辑思维]No.183_知识笔记

    2016/10/30 14:31:32   一.对事物的见解分为两类:         1.评论性的见解               说的内容都是对的,符合常理的,但是却是不解决问题的.       ...

  4. 天气预报API简单实现

    本人小白,觉得好玩,就注册了一个博客.一时也不知道写些什么,就把昨天做的一个简单的网页天气预报写一下吧,希望对各位看官有所帮助. 运行环境:php+mysql+WIN/Linux,框架什么的都无所谓了 ...

  5. tip浮动提示框

    今天工作中碰到要弹出tip浮动提示框,如服务器控件的ToolTip属性. 通过GOOGLE搜到了一个很好用的tip浮动提示框:TipTip jQuery Plugin. 例子如下: <!DOCT ...

  6. 【PL/SQL练习】游标cursor :oracle 在执行sql语句时,为sql语句所分配的一个私有的内存区域

    隐式游标:一次只能返回一行结果(不需要定义,默认自动建立)  显式游标: 需要开发人员提前定义,可以通过循环的方式处理游标里的sql语句,返回多行结果    隐式游标的属性:   sql%rowcou ...

  7. 多线程(二)NSThread

    一.NSThread优缺点      优点:NSThread是最轻量级的      缺点:需要自己管理线程的生命周期,线程同步.线程同步对数据的加锁会有一定的系统开销   二.NSThread的使用 ...

  8. hadoop fs管理文件权限

    sudo addgroup Hadoop#添加一个hadoop组sudo usermod -a -G hadoop larry#将当前用户加入到hadoop组 修改hadoop目录的权限sudo ch ...

  9. 手游设备ID

    android: imei: IMEI(International Mobile Equipment Identity)是国际移动设备标识的缩写,IMEI由15位数字(英文字母)组成. mac: 是指 ...

  10. excel中单元格计算

    首先,得明确excel中相对引用和绝对引用的概念,这里$符号起着关键作用,当在一个行或列的指示符前面加$则表示绝对引用,否则相对引用,具体: 1.相对引用,复制公式时地址跟着发生变化,如C1单元格有公 ...