CSS ::before和::after伪元素

/* CSS3 语法 */

element::before { 样式 }

/* （单冒号）CSS2 过时语法 (仅用来支持 IE8) */

element:before { 样式 }

 

CSS3 引入 ::before  是为了将伪类和伪元素区别开来，浏览器也接受由CSS 2 引入的 :before 写法。

我们可以用几乎任何方法定义 content 中的文字和图片样式

 

before 和 after 顾名思义 其就是附着在元素前后的伪元素，伪元素的意思是元素不是在DOM中生成的，而是在浏览器渲染引擎渲染CSS的时候画上去的，所以你在浏览器查看元素上是看不到伪元素的HTML结果的。

还有一点与大家想象的不同的是 ，before和after 和父元素在一个线性空间内的，而是另一层元素盖在父元素上的。

在伪元素的样式上，可以使用content属性去指定元素的内容。如果设置为 '' 或是 None，那我们是看不到该元素的。默认去情况下伪元素是行内元素。

content属性可以是设置的值：

• "string" 字符串内容会直接显示在页面当中，当然如果你在字符串中填写html标签的话是不会被解析的。

  li::after {content: '/';}

• attr() 它可以调用当前元素的属性进行显示，比较用于的一个例子就是 显示连接上的提示文字

  a:after { content:"(" attr(href) ")"; }

• url 用于引用图片，或是 css 渐变属性。

  li::after { content: url(bg.png)}

• counter 调用计数器，可以不使用列表元素实现序号功能。具体请参见 counter-increment 和 counter-reset 属性的用法。

  li::before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }

实例

.ribbon {
   background-color: #5BC8F7;
}

.ribbon::before {
   content:          "Look at this orange box.";
   background-color: #FFBA10;
   border-color:     black;
   border-style:     dotted;
}
<span class="ribbon">Notice where the orange box is.</span>

 

清除浮动 通常我们清除清除浮动的方式就是在浮动元素后面添加一个空的Div标签，然后在设置它的清除浮动要是，使用after伪元素，我们就不需要添加无意义的div标签在html中了，下面的例子就使用了伪元素清除浮动，并且也展示了，使用伪元素制作面包屑导航条的间隔符。

html

<ul>
  <li>Home</li>
  <li>Blog</li>
  <li>About</li>
</ul>

css

ul {
  margin: 100px;
  background: #ccc;
  padding: 10px;
  border: 1px solid #999;
  list-style:none;
}
ul::after {
  clear: both;
  content: '';
  display: block;
}
li {
   float: left; 
   margin-left: 10px;
}
li::after {
  content: '/';
  margin-left: 10px;
}
li:last-child::after{
  content: none;
}

五角星

下面这个五角星，就是有三个三角形组成的。蓝色的三角形是有元素自身构成的。剩下的红和黄都是有before和after两个伪元素构成的，当然要想画出这个五角星，只使用伪元素是不行的，还需要是用CSS3的transform属性使得图形能够旋转角度。

<div id='star-five'></div>

#star-five {
  margin-top: 60px;
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 70px solid blue;
  position: relative;
  transform: rotate(35deg);
}
#star-five:before {
   border-bottom: 80px solid red;
   border-left: 30px solid transparent;
   border-right: 30px solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: -45px;
   left: -65px;
   content: '';
  transform: rotate(-35deg);
}
#star-five:after {
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 70px solid yellow;
  top: 7px;
  left: -110px;
  position: absolute;
  display: block;
  content: '';
  transform: rotate(-70deg);
}

待办列表

html:

<ul>
  <li>Buy milk</li>
  <li>Take the dog for a walk</li>
  <li>Exercise</li>
  <li>Write code</li>
  <li>Play music</li>
  <li>Relax</li>
</ul>

 css：

li {
  list-style-type: none;
  position: relative;
  margin: 2px;
  padding: 0.5em 0.5em 0.5em 2em;
  background: lightgrey;
  font-family: sans-serif;
}

li.done {
  background: #CCFF99;
}

li.done::before {
  content: '';
  position: absolute;
  border-color: #009933;
  border-style: solid;
  border-width: 0 0.3em 0.25em 0;
  height: 1em;
  top: 1.3em;
  left: 0.6em;
  margin-top: -1em;
  transform: rotate(45deg);
  width: 0.5em;
}

Javascript:

var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if( ev.target.tagName === 'LI') {
     ev.target.classList.toggle('done'); 
  }
}, false);