码迷,mamicode.com
首页 > 其他好文 > 详细

::before,::after

时间:2016-09-18 11:52:07      阅读:106      评论:0      收藏:0      [点我收藏+]

标签:

效果图:

技术分享技术分享

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
a {  
    position: relative;  
    display: inline-block;  
    outline: none;  
    text-decoration: none;  
    color: #000;  
    font-size: 32px;  
    padding: 5px 10px;  
}  
  
a:hover::before, a:hover::after { position: absolute; }  
a:hover::before { content: "\5B"; left: -10px; }  
a:hover::after { content: "\5D"; right:  -10px; }  
</style>
</head>

<body>
<a>family</a>
</body>
</html>

 

::before,::after

标签:

原文地址:http://www.cnblogs.com/luoluo8/p/5880670.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!