详细参考http://www.cnblogs.com/cheerful-queen/p/4971484.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> blockquote{ background-color: #ccc; color: #fff; height: 100px; width: 400px; text-align: center; line-height: 100px; /*line-height: 100px 用来设置鼠标点击的范围， 没有这个值鼠标点击的范围就是字体所占用的那个范围， 设置了这个鼠标点击的范围就会扩大*/ } blockquote:hover:before{ content: '啊啊啊啊哦'; color: red; } blockquote:hover:after{ content: '啊啊啊啊哦诶'; color: green; } </style> </head> <body> <blockquote>我是一个blockquote</blockquote> </body> </html>
鼠标没有移动到blockqoute上的时候：
鼠标移动到blockqoute上的时候：
