CSS before和after伪类元素应用实例及分析-html教學-PHP中文網

CSS before和after伪类元素应用实例及分析

WBOY

發布： 2016-06-01 09:53:21

原創

2052 人瀏覽過

在分析before和after伪元素之前，我们先看一个实例，这个实例使用了css伪类元素affter制作了一个自定义的input check样式。

实例如下：

<code class="language-css">


<title>CSS input checkbox自定义样式</title>
<style type="text/css">
.compare_button .checkboxcss {
    cursor: pointer;
    position: absolute;
    width: 15px;
    height: 15px;
    top: 0;
    left: 0;
    background: #f7f7f7;
    border: 2px solid #f5b34f;
    border-radius: 5px;
}
.compare_button {
    position: relative;
}
.compare_button .checkboxcss:after {
    opacity: 0;
    content: '';
    position: absolute;
    width: 7px;
    height: 3px;
    background: transparent;
    top: 3px;
    left: 3px;
    border: 3px solid #1e8cc5;
    border-top: none;
    border-right: none;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.compare_button input[type=checkbox]:checked + label:after {
    opacity: 1;
}
</style>


<div class="compare_button">
        <input type="checkbox" id="compare_39680" class="checkbox-input">
        <label class="checkboxcss" for="compare_39680"></label>
        <span>compare text</span>
    </div>

</code>

登入後複製

效果图：

CSS before和after伪类元素应用实例及分析

下面我们对CSS before和after伪类元素的用法进行描述

一、伪元素基本用法

在CSS选择器中加上相应伪类选择符就可以了，像这样：#example: before或者#example: after，这里是使用ID选择器，比如下面的CSS代码：

<code class="language-css">#example:before {
  content: "\"";
}
#example:after {
  content: "\"";
}</code>

登入後複製

它的效果就是为example标签前后加上双引号。

和伪类的选择符很像，但是有一点小区别，就是伪类选择符实际上是用两个冒号，::before的形式，以和伪类区别开，但是只用一个冒号浏览器也是可以识别的，在CSS3中规定是一个冒号就可以了。

如果没有绑定标签，像这样：:before{ content:”=”;} 这样的伪元素是没有意义的,代码会在DOM里的每个元素的内容之前插入散列符号。即使你删除了

标签和它的所有内容，你仍会在页面上看见两个散列符号：一个在里，另一个在标签里。

那么可不可以给伪元素再添加伪元素呢？比如下面这个代码：

<code class="language-css">#example:after:after{
    content: "after";
}</code>

登入後複製

在浏览器中刷新，测试一下会发现什么也没有显示，也就是说再给伪元素添加伪元素目前很多浏览器上是无效的，浏览器忽略掉该定义，只能识别一层伪元素，但是既然可以伪元素添加伪元素，可以期待再为伪元素添加伪元素，其表现力是很强的。

二、伪元素属性和样式

1.content属性

每个伪元素必须要有content属性，否则的话浏览器不能识别，你可以为content属性添加空引用作为它的值(即:content:“”)。

你也可以为content包含一个指向一个图像的URL，就像在css里包含一个背景图像一样：

<code class="language-css">p:before {

  content: url(image.jpg);
}</code>

登入後複製

也可以包含一个Data URI代替图像引用，就像使用css背景一样。

你还可以选择ATRR(X)中的函数的形式。“把X属性的值以字符串的形式返回”，比如：

<code class="language-css">a:after {
  content: attr(href);
}</code>

登入後複製

attr()函数的功能是把得到特定属性的值并把它作为插入的文本成为一个伪元素。

上面的代码会导致页面上的每一个元素的href值立即被放置在每个各自的元素的后面。在文档被打印时，它可以用作一个包含所有URl的打印样式表。

2.标签属性

伪元素也是元素，所以你可以为它添加大部分其他元素具有的属性，比如定位属性，字体属性，背景属性和盒模型的属性等，另外由于伪元素默认是内联元素，所以如果要使得盒模型中的height等属性有效的话，必须要把它转化为块元素，具体就是设置其display属性为block,或者设置为float等。如下：

<code class="language-css">#example:after{
    position: absolute;
    display: block;
    left: 20px;
    top: 20px;
    content: "\"";
    width: 20px;
    height: 20px;
    background: #6F3;
}</code>

登入後複製

既然伪元素可以定义position等属性，那么before和after的约束就很有限了，before和after的区别只能是在没有特殊定义伪元素的位置等信息的时候的默认行为不一致，before出现在相对绑定的元素之前，而after出现在相对绑定的元素位置之后。

另外既然可以为伪元素定义盒子模型的属性，就不得不说，伪元素默认为其目标元素的子元素，比如#example:after，伪元素after的父元素就是#example选择符对应的元素，它具有一般子元素盒模型的特性，即为他定义的height和width等属性规则为影响目标元素的规则。

三、伪元素的兼容性

基本可以放心的使用伪元素，因为它有很好的兼容性，可以不用加浏览器前缀而很好的使用它。

支持:before 和 :after 伪元素的浏览器有：