您的位置：首页 > Web前端 > CSS

CSS中 伪类和伪元素的用法 --实现元素前后添加[]框

2016-06-16 18:41 435 查看 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
a{
position:relative;
display:inline-block;
outline:none;
text-decoration:none;
color:#636;
font-size:24px;
padding:5px 25px;
}
a:hover::before,a:hover::after{
position:absolute;   /*注意此处的位置属性*/
}
a:hover::before{
content:"\5B";
left:-5px;       /*思考为什么是-5px*/
}
a:hover::after{
content:"\5D";
right:-5px;
}
</style>
</head>

<body>

<a href="http://www.baidu.com">123</a>
<a href="http://www.baidu.com">456</a>
</body>
</html>


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航