鼠标经过 后字体左移, 箭头右移
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ margin-top: 333px; margin-left: 200px; } a{ display: block; width: 600px; font-size: 46px; border-radius: 7px; border: 1px solid #ff0088; /*text-align: center;*/ text-decoration: none; color: purple; padding-left: 160px; background: darkturquoise; transition: all 2s; position: relative; box-sizing: border-box; } a:hover{ background: #000; color: #fff; padding-left: 20px; } @font-face { font-family: 'font-icon'; src: url('icons.eot'),url('icons.otf'),url('icons.svg'),url('icons.ttf'),url('icons.woff'); } a::after{ position: absolute; right: 85%; font-family: 'font-icon'; //注意字体的引用和伪类和Hover配合 content: '\e607'; transition: all 1s; } a:hover::after{ right: 6%; } </style> </head> <body> <a href="http://www.baidu.com">百度一下,你就知道</a> </body> </html>