首页 > 建站教程 > Div+Css >  关于before和after以及content的用法正文

关于before和after以及content的用法

一、伪元素和伪类的区别

在 CSS3 中为了区别伪元素和伪类为伪元素使用了双冒号，即 :before为伪元素 ； ::before为伪类；

关于语法和浏览器支持
伪元素实际上在CSS1中就存在了，但是我们现在所讨论的:before和:after则发布于CSS2.1中。在最初，伪元素的语法是使用“:”（一个冒号），随着web的发展，在css3中修订后的伪元素使用“::”（两个冒号），也就是::before 和 ::after—以区分伪元素和伪类（比如:hover，:active等），然而，无论你使用单冒号还是双冒号，浏览器都将能识别它们。由于IE8只支持单冒号的格式，安全起见如果你想要更广泛的浏览器兼容性那么还是使用单冒号的格式吧！

伪类可以独立于文档的元素来分配样式，且可以分配给任何元素，逻辑上和功能上类类似，但是其是预定义的、不存在于文档树中且表达方式也不同，所以叫伪类。

伪元素所控制的内容和一个元素控制的内容一样，但是伪元素不存在于文档树中，不是真正的元素，所以叫伪元素。

伪类有：:first-child ，:link:，vistited，:hover:，active:focus，:lang
伪元素有：:first-line，:first-letter，:before，:after，::selection

二、基本语法

平常仅仅需要将这两个伪元素用于添加一些自定义字符时，只需使用伪类使用的单冒号写法，以保证浏览器的兼容性：

尽管作为“虚假”的元素，事实上伪元素表现上就像是“真正”的元素，我们能够给它们添加任何样式，比如改变它们的颜色、添加背景色、调整字体大小、调整它们中的文本等等。 
p:before  {content: "↗"; font-size:26px; }

a:after { content: "↗"; color:red; }

content用法

伪元素的特有属性content，可以包含文字，图片，调用属性，调用计数器等。

1、content : “string”

可以在节点之前插入文字 
div:before{ content: 'string'; }

2、content : attr(attrName);

可以在节点之前插入属性data-name的值 value 
<div class="demo" data-name="value"></div>
div:before{ content: attr(data-name); }

3、content:url();

插入媒体文件，如图片 
div:before{ content: url(images/logo.png); }

4、调用计数器

counter-increment属性递增一个或多个计数器值。
counter-increment属性通常用于counter-reset属性和content属性。
counter相当于一个变量，根据css规则的增加一跟踪使用次数；
counter-reset重置计数器默认值；
counter-increment增加计数器；
counter()和counters()获取计数；用于增加计数值，默认的步长值是”1″，同样我们可以改变它，如counter-increment:photocount 2;定义步长为2

案例1: 
<style>
    body{counter-reset: chapter;}
    div:before{
            counter-increment: chapter;
            content: "chapter" counter(chapter) ".";
        }
</style>
<div></div>
<div></div>
<div></div>
<div></div>

显示结果为：



案例2（对部分和子部分进行编号）： 
<style>
body {counter-reset:section;}
h1 {counter-reset:subsection;}
h1:before{
    counter-increment:section;
    content:"Section " counter(section) ". ";
}
h2:before {
    counter-increment:subsection;
    content:counter(section) "." counter(subsection) " ";
}
</style>
</head>

<body>

<p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is specified.</p>

<h1>HTML tutorials</h1>
<h2>HTML Tutorial</h2>
<h2>XHTML Tutorial</h2>
<h2>CSS Tutorial</h2>

<h1>Scripting tutorials</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>

</body>
</html>

案例2结果



案例3： 进阶技巧

清除浮动是一个时常会遇到的问题，不少人的解决办法是添加一个空的 div 应用 clear:both; 属性。现在，无需增加没有意义的元素，仅需要以下样式即可在元素尾部自动清除浮动： 
.clear-fix { *overflow: hidden; *zoom: 1; } /**IE 兼容写法*/
.clear-fix:after { display: table; content: "";  clear: both; }

5、调用引号字符open-quote close-quote 
.demo:before{ content: open-quote; }
.demo:after{ content: close-quote; }
<div class="demo"></div>

显示结果为:“this is demo”
TAGS: :before  :after