<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css小样式</title> </head> <style type="text/css"> body{ margin: 0px; padding:0px; background:pink; } .mo-tab-default{ display: block; 33.333%; height: 30px; line-height: 30px; text-align: center; position: relative; cursor:context-menu; float: left; overflow: hidden; } .mo-tab-default:before{ position: absolute; content: ""; background:steelblue; left: -100%; bottom: 0px; height: 1px; 50%; transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; } .mo-tab-default:after{说 position: absolute; content: ""; background:steelblue; right: -100%; bottom: 0px; height: 1px; 50%; transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; } .mo-tab-default:hover::before{ left: 0; } .mo-tab-default:hover::after{ right: 0; } </style> <body> <a class="mo-tab-default">11</a> <a class="mo-tab-default">22</a> <a class="mo-tab-default">33</a> </body> </html>