首页  网站建设  网站优化  服务项目  建站案例  新闻资讯  关于我们  联系我们
菜单
当前您的位置:济南网站建设 > 新闻资讯 > 建站干货之css之伪类的应用after

建站干货之css之伪类的应用after

  • 文章来源:建站教程
  • 文章作者:css中after伪类的用
  • 时间:2020-07-09
  • 浏览:119

CSS ::after伪元素用于在被选择的元素之后插入由content属性指定的内容。
::after伪元素是一个虚拟元素,它默认是内联元素。它通常配合content属性来一起使用,content属性为该虚拟元素提供内容。
例如,如果你想在一个超链接后面添加一个小图标  ,我们就可以通过::after伪元素来实现。
<a href="#" class="link_icon">这是一个超链接</a>
通过::after伪元素,在后面插入了一个图标。
link_icon:after{
  content: url(./img/link.png);
}  
上面的代码将得到下面的结果:
山东济南建站这是一个超链接通过::after伪元素在后面插入了一个图标。
::after伪元素可以插入任何的内容:文字,图片等。例如下面都是有效的内容:
.element::after {
    /* 插入一幅图片 */
    content: url(./image.png); 
}
.element::after {
    /* 插入文字 */
    content: "(测试文字...)";
}
.element::after {
    /* 插入unicode字符 */
    content: "\201C";
}
.element::after {
    /* 空内容 */
    content: "";
}
济南H5建站
另外,content中的内容还可以是一个CSS counter,或者直接将它留空。
内容为空的伪元素经常用来清除浮动。例如micro clearfix hack中使用::after和::before伪元素来清除容器中的浮动。
我们也可以为::after伪元素设置样式:它可以进行浮动,定位,甚至制作animation动画。
所有通过::after伪元素添加的元素不会被插入到DOM中,它们只是有视觉上的效果。因此,屏幕阅读器不会识别由::after伪元素产生的内容。最佳实践是:不要使用::after伪元素来制作重要的内容。
由于伪元素的内容不会被插入到DOM中,所以你不能使用JavaScript为伪元素附加任何的事件。
:after和::after的区别
在别人书写的CSS代码中,你可能经常看到有人使用:after作为伪元素,而有一些人则使用::after作为伪元素。它们之间有什么区别呢?
在CSS1和CSS2规范中,伪元素通过一个冒号:来定义,例如:hover。在CSS3规范中,使用双冒号::语法来表示伪元素(pseudo-elements),以区别于伪类(pseudo-classes)。
/* 旧的CSS2语法 */
.element:after {
    /*  */
}
/* 新的CSS3语法 */
.element::after {
    /*  */
}
只要是支持双冒号语法的浏览器都支持单冒号语法。IE8不支持双冒号语法,如果你要支持IE8浏览器,建议使用单冒号语法。
示例代码
:after伪元素通常用于制作一些几何图形。例如下面的代码使用:before和:after伪元素来制作一颗红心。
#heart {
    position: relative;
    width: 100px;
    height: 90px;
}
#heart:before,
#heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: #B10B14;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}
#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
}
浏览器支持
支持单冒号语法的:after伪元素的浏览器有:Chrome, Firefox, Safari, Opera, Internet Explorer 8+ 以及 Android 和 iOS。
支持双冒号语法的::after伪元素的浏览器有:Chrome, Firefox, Safari, Opera, Internet Explorer 9+ 以及 Android 和 iOS。
支持伪元素动画的浏览器有:Chrome 26+, Firefox 4+, Safari 6.1+, Opera (post Blink) 和 Internet Explorer 10+。
IE浏览器不支持在伪元素上使用z-index属性。
After和before 的应用方法是一样的,before是应该在元素前添加内容。CSS样式表的主要作用是修饰Web页面上的HTML标记,但有时候,为了实现某个效果而往页面里反复添加某个HTML标记很繁琐,或者是显得多余,或者是由于某种原因而做不到。这就是CSS伪元素(Pseudo-Element)可以发挥作用的地方,所谓‘伪元素’,就是本身不存在的页面元素,HTML代码里并没有这样的元素,但在页面显示时,你却能看到这些本来不存在的元素发挥着作用。
Copyright © 2011-2019 山东塞尼铁克网络科技有限公司AII Rights Reserved. Powered by Yongsy