伪元素和伪类

伪类与伪元素需要区别的地方是: before & after

:before   ::before   :after   ::after

通过MDN里的描述::before 是css2里的,称伪类。::before shi css3 里的,称伪元素。
[css]/* CSS3 syntax */ element::before { style properties }

/* CSS2 obsolete syntax (only needed to support IE8) */ element:before { style properties }

/* inserts content before every p element */ p::before { content: "Hello world!"; }
The ::before notation was introduced in CSS3 in order to establish a discrimination between pseudo-classes and pseudo-elements. Browsers also accept the notation :before introduced in CSS 2.
[/css] 一切按MDN里的来,https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Abefore  (MDN语法介绍)

伪元素利用起来还是挺好玩的。 我的首页左右括号的动画。www.lwxyfer.com,通过把伪元素和动画连接起来。

 

还有就是content属性值的问题,可以是:https://developer.mozilla.org/en-US/docs/Web/CSS/content

/* Keywords that cannot be combined with other values */</span>
<span class="token property">content</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span>  
<span class="token property">content</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">/* &lt;string&gt; value, non-latin characters must be encoded */</span>  
<span class="token comment" spellcheck="true">/* e.g. 0A0 for &amp;nbsp; */</span>  
<span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">'prefix'</span><span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">/* &lt;uri&gt; value */</span>  
<span class="token property">content</span><span class="token punctuation">:</span> <span class="token url">url(http://www.example.com/test.html)</span><span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">/* &lt;counter&gt; values */</span>  
<span class="token property">content</span><span class="token punctuation">:</span> chapter_counter<span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">/* attr() value linked to the HTML attribute value */</span>  
<span class="token property">content</span><span class="token punctuation">:</span> <span class="token function">attr</span>(value string)<span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">/* Language- and position-dependant keywords */</span>  
<span class="token property">content</span><span class="token punctuation">:</span> open-quote<span class="token punctuation">;</span>  
<span class="token property">content</span><span class="token punctuation">:</span> close-quote<span class="token punctuation">;</span>  
<span class="token property">content</span><span class="token punctuation">:</span> no-open-quote<span class="token punctuation">;</span>  
<span class="token property">content</span><span class="token punctuation">:</span> no-close-quote<span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">/* Except for normal and none, several values */</span>  
<span class="token comment" spellcheck="true">/* can be used simultaneously */</span>  
<span class="token property">content</span><span class="token punctuation">:</span> open-quote chapter_counter<span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">/* Global values */</span>  
<span class="token property">content</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span>  
<span class="token property">content</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span>  
<span class="token property">content</span><span class="token punctuation">:</span> unset<span class="token punctuation">;  

下面贴一些灵活利用伪元素的实例。挺好玩的。

1.http://www.bennadel.com/?site-photo=585

2.http://blog.jobbole.com/49173/

3.http://designshack.net/articles/css/use-pseudo-elements-to-create-an-image-stack-illusion/

4.http://www.paulund.co.uk/creating-different-css3-box-shadows-effects

5.http://blog.dimpurr.com/css-before-after/

6.https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Abefore