<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>利用before.after</title>

<style>

body, ul, li, p {margin:0; padding:0; font-family:Verdana, Geneva, sans-serif;}

ul li {list-style:none;}

img {border:0 none}

.focus {background:rgba(250,250,250,0.25); width:174px; height:174px; border:1px dashed #666; position:absolute; left:0px; top:0px; display:none;}

.focus:before {width:174px; height:134px; border-left:1px solid #fff; border-right:1px solid #fff; content:''; position:absolute; left:-1px; top:20px;}

.focus:after {width:134px; height:174px; border-top:1px solid #fff; border-bottom:1px solid #fff; content:''; position:absolute; top:-1px; left:20px;}

.content .focus {display:block;}

</style>

</head>

<body>

<div class="content">

<a href=""><img src="jiawin_1.jpg" />

  <p class="focus"></p></a>

</div>

</body>

</html>

http://www.jiawin.com/css-before-after

现在我们经常在 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. jQuery如何改变css伪元素样式

    首先我们看一下css伪元素是什么: CSS 伪元素用于向某些选择器设置特殊效果. 伪元素有哪些: :first-line 伪元素:"first-line" 伪元素用于向文本的首行设 ...

  2. css 伪元素分享！！！

    最近接触到的css 伪元素觉得还算不错 分享下: 1.清楚内盒浮动设置: ;} .back_list ul:after{;visibility: hidden;}/*清楚内盒浮动设置*/ 2.伪元素a ...

  3. CSS伪类与CSS伪元素的区别及由来

    关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...

  4. (六)CSS伪元素

    CSS伪元素用于向某些选择器设置特殊效果. 伪元素的用法和伪类相似: selector:pseudo-element {property:value;} CSS类也可以与伪元素配合使用: select ...

  5. CSS 伪元素

    CSS伪元素是用来添加一些选择器的特殊效果. 语法 伪元素的语法: selector:pseudo-element {property:value;} CSS类也可以使用伪元素: selector.c ...

  6. css伪元素

    CSS 伪元素用于向某些选择器设置特殊效果. 1.:first-line 伪元素  "first-line" 伪元素用于向文本的首行设置特殊样式.注意:"first-li ...

  7. js如何控制css伪元素内容（before，after）

    曾经遇到的问题,在对抗UC浏览器屏蔽需要把内容输出到css 伪元素中输出.有个疑问如何用js控制它.于是在segmentfault提问,如下是对问题的整理: 如何用js控制css伪类after 简单粗 ...

  8. css伪元素用法大全

    本文主要讲解css伪元素的用法,有需要的朋友可以阅读此文.本文讲解的伪元素有:before,after. 什么是伪元素(Pseudo element)? 伪元素不是真正的元素,不存在与文档之中,所以j ...

  9. js分析 汽_车_之_家 js生成css伪元素 hs_kw44_configUS::before

    0.参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements https://developer.mozilla.org/ ...

随机推荐

  1. maven 排除test测试类

    <!-- 不编译test --> <plugin> <groupId>org.apache.maven.plugins</groupId> <ar ...

  2. PHP依赖倒置和控制反转

    判断代码的好坏,我们有自己的标准:高内聚,低耦合.为了解决这一问题,php中有许多优秀的设计模式,比如工厂模式,单例模式. 而在代码中体现出来的设计模式,就如依赖注入和控制反转. 那什么是依赖注入? ...

  3. java程序中加入@SuppressWarnings("serial")是什么意思？

    比如有个类实现了java.io.Serialize接口:package com.onede4.test; public class TestSerial implements java.io.Seri ...

  4. Spring MVC程序中怎么得到静态资源文件css,js,图片文件的路径问题

    问题描述 在用springmvc开发应用程序的时候.对于像我一样的初学者,而且还是自学的人,有一个很头疼的问题.那就是数据都已经查出来了,但是页面的样式仍然十分简陋,加载不了css.js,图片等资源文 ...

  5. selenium_采集药品数据

    Python爬虫视频教程零基础小白到scrapy爬虫高手-轻松入门 https://item.taobao.com/item.htm?spm=a1z38n.10677092.0.0.482434a6E ...

  6. Scala进阶之路-Spark底层通信小案例

    Scala进阶之路-Spark底层通信小案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Spark Master和worker通信过程简介 1>.Worker会向ma ...

  7. 设计模式---组件协作模式之观察者模式（Observer）

    一:概念 Observer模式的作用是当一个对象的状态发生变化时,能够自动通知其他关联对象,自动刷新对象状态 Observer模式提供给关联对象一种同步通信的手段,使得某个对象与依赖他的其他对象之间保 ...

  8. 查看windows下指定的端口是否开放

    有时候会出现ip  ping的通   但是就是连接不上的情况.这时候我们需要检测一下这个端口是否被开放 netstat -ano -p tcp | find >nul && ec ...

  9. win7屏蔽ctrl+alt+up/down快捷键/ (eclipse冲突)

    win7屏蔽ctrl+alt+up/down快捷键/   Eclipse有个非常好用的快捷键(当然Eclipse好用的快捷键有N个)Ctrl+Alt+UP/DOWN,用于复制当前行的内容,用法很简单, ...

  10. #js window.open() 父窗口与子窗口的互相调用【转】

    未完整版 javascript 父窗口与子窗口的互相调用 a.html 父页面 <HTML> <HEAD> <meta http-equiv="content- ...