li{
position: relative;
float: left;
width: 80px;
list-style: none;
text-align: center;
}

.hover>li:before{
content: "";
border-bottom: 2px solid #5ac;
position: absolute;
top: 20px;
width: 0;
left: 50%;
transition: all linear .5s;
padding-bottom: 20px;
}
.hover>li:hover:before{
position: absolute;
width: 100%;
top: 20px;
left: 0;
}
.border{
position: relative;
width:150px;
height: 36px;
border:1px solid black;
border-radius:5px;
background: #eee;
margin-left: 50px;
}
.border:before,.border:after{
content: "";
display: block;
position: absolute;
top:8px;
width: 0;
height: 0;
border:6px solid transparent;
}
.border:before{
left:-11px;
border-right-color: #eee;
z-index:1
}
.border:after {
left: -12px;
border-right-color: black;
z-index: 0
}
-->

　　HTML5增加了一系列的伪类选择器和伪元素选择器，增加的伪元素选择器有::before、::after、::first-letter(首字母)、::first-line(首行)、::selection(文档高亮部分，如鼠标选中文字)、::backdrop(不常用)。前面四者可能比较常用，会聚集到具体某一元素上，后面两个属于全局的元素。

　　这里谈一下::before和::after元素的使用。

　　1、添加元素内容：

<!DOCTYPE html>

<html>

    <head>

        <title>添加元素内容</title>

        <meta charset="utf-8" />

        <style>

           p{ padding: 20px;}

           p:before{content: "我是before添加的内容"; font-weight: bold;}

           p:after{content: "我是after添加的内容"; font-style: italic}

        </style>

    </head>

    <body>

    <p>我是元素里面的内容</p>

    </body>

</html>

　　在这里添加了元素内边距，判断before和after的位置是包含在content之中还是之外，结果如下：

我是元素里面的内容

　　添加一个伪元素十分的简单，必须设置content属性，该元素才能展示出来(包括为空"")。并且可以发现伪元素的文字，默认是不能按照文本选择的。

　　2、展示列表的hover特效(利用伪元素制作动画效果)：

<!DOCTYPE html>

<html>

    <head>

        <title>展示边框出现效果</title>

        <meta charset="utf-8" />

        <style>

            .hover>li{

                position: relative;

                float: left;

                width: 80px;

                list-style: none;

                text-align: center;

            }

            .hover>li:before{

                content: "";

                border-bottom: 2px solid #5ac;

                position: absolute;

                top: 20px;

                width: 0;

                left: 50%;

                transition: all linear .5s;

                padding-bottom: 20px;

            }

            .hover>li:hover:before{

                position: absolute;

                width: 100%;

                top: 20px;

                left: 0;

            }

        </style>

    </head>

    <body>

    <ul class="hover">

        <li>01组</li>

        <li>02组</li>

        <li>03组</li>

    </ul>

    </body>

</html>

　　上面的代码中，content，top及值，width，padding-bottom，transition都是必不可少的，只要有一点偏差就不能达到想要的效果。结果如下：

  • 01组
  • 02组
  • 03组

　　3、由于这两个伪类属于元素的content部分，所以可以用来对元素进行边框外形的设置：

<!DOCTYPE html>

<html>

    <head>

        <title>设置边框样式</title>

        <meta charset="utf-8" />

        <style>

            .border{

                position: relative;

                width:150px;

                height: 36px;

                border:1px solid black;

                border-radius:5px;

                background: #eee;

                margin-left: 50px;

            }

            .border:before,.border:after{

                content: "";

                display: block;

                position: absolute;

                top:8px;

                width: 0;

                height: 0;

                border:6px solid transparent;

            }

            .border:before{

                left:-11px;

                border-right-color: #eee;

                z-index:1

            }

            .border:after {

                left: -12px;

                border-right-color: black;

                z-index: 0

            }

        </style>

    </head>

    <body>

    <div class="border"></div>

    </body>

</html>

　　通过before和after的定位，利用位置差值和颜色差异，将突出的小角展示出来。结果如下：

 

　　利用这两个伪元素可以很方便的为当前元素设置背景、图标、动画效果，而不用在添加额外的元素。

使用伪类before和after的更多相关文章

  1. 谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  2. CSS3 nth 伪类选择器

    考察下面的 HTML 代码片段: <div> <section>section 1</section> <section>section 2</s ...

  3. CSS权威指南之css声明，伪类，文本处理--(简要笔记一)

    1.css层叠的含义 后面的会覆盖前面的样式 2.每个元素生成一个框,也称盒.   3.替换元素和非替换元素. img如果不指定src的外部路径,该元素就没有意义.他由文档本身之外的一个图像文件来替换 ...

  4. CSS-用伪类制作小箭头（轮播图的左右切换btn）

    先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...

  5. 伪类before和after

     以你添加的元素为基础!在他的里面!也就是他的内容的前面或者后面添加东西!  如果原来的元素没有内容会出现什么情况?(伪类的宽和高和元素的相等)

  6. 解密jQuery内核 Sizzle引擎筛选器 - 位置伪类（一）

    本章开始分析过滤器,根据API的顺序来 主要涉及的知识点 jQuery的组成 pushStack方法的作用 sizzle伪类选择器 首页我们知道jQuery对象是一个数组对象 内部结构 jQuery的 ...

  7. 利用伪类:before&&:after实现图标库图标

    一.实现如下效果 二.代码实现思路 图案一源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

  8. CSS笔记之伪类与伪元素

    伪类分为两种:UI伪类 与 结构化伪类 UI伪类:a:link{}    a:hover{}   a:active{}  a:visited{} input[type='text']:focus{} ...

  9. W3School-CSS 伪类 (Pseudo-classes) 实例

    CSS 伪类 (Pseudo-classes) 实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) ...

  10. <a>链接的四个伪类顺序

    <a>元素的作用是可以创建一个链接,链接对应4个状态:未访问,已访问,鼠标悬停,鼠标点击瞬间. 为了给链接的4个状态应用样式,引入伪类的概念. 什么是伪类呢?简单点说,就是你没定义这个类, ...

随机推荐

  1. python的w+到底是什么

    python 文件处理的打开方式有很多种, os.mknod("test.txt") 创建空文件 fp = open("test.txt",w) 直接打开一个文 ...

  2. AngularJS进阶(三十七)IE浏览器兼容性后续

    IE浏览器兼容性后续 前言 继续尝试解决IE浏览器兼容性问题,结局方案为更换jquery.angularjs.IE的版本. 1.首先尝试更换jquery版本为1.7.2 jquery-1.9.1.js ...

  3. Leetcode_169_Majority Element

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/42247887 Given an array of size ...

  4. 《java入门》第一季之类（String类字符串一旦被赋值就没法改变）

    毫无疑问,String类是java里面最重要的类之一.因此它有很多方法需要了解和掌握. 字符串一旦被赋值,值就不能发生改变: package cn.itcast_02; /* * 字符串的特点:一旦被 ...

  5. mysql进阶(八)怎么对varchar类型排序问题

    MySQL中怎么对varchar类型排序问题 asc 升级 desc降序 在mysql默认order by 只对数字与日期类型可以排序,但对于varchar字符型类型排序好像没有用了,下面我来给各位同 ...

  6. Gradle 1.12用户指南翻译——第二十九章. Checkstyle 插件

    其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Github上的地址: https://g ...

  7. Android开发概要记录

    1..o文件. .ko和.so文件的路径 \kernel\out\mediatek---------------.o文件 .c/.cpp文件编译生成的目标文件 \out\target\product\ ...

  8. Android UI之View的加载机制（二）

    转载请标明出处:http://blog.csdn.net/sk719887916/article/details/39961201,作者:skay 对于接触安卓开不到一年的自己来说,总结下view的生 ...

  9. SharePoint 2013配置启用搜索服务

    1.安装完毕SharePoint 2013,新建网站集,点击搜索,出现如下错误(因为没配置,别激动). 2.尝试启动服务器场中的服务之SharePoint Server Search,提示新建搜索应用 ...

  10. SharePoint 开发TimerJob 介绍

    项目需要写TimerJob,以前也大概知道原理,不过,开发过程中,还是遇到一些问题,网上看了好多博客,也有写的灰常好的,不过,自己还是想再写一下,也算是给自己一个总结,也算给大家多一个参考吧. Tim ...