你所不知的 CSS ::before 和 ::after 伪元素用法
(1)鼠标移上链接,出现方括号
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: -20px; } a:hover::after { content: "\5D"; right: -20px; }
(2)悬浮出现双边框
a { position: relative; display: inline-block; outline: none; text-decoration: none; color: #000; font-size: 32px; padding: 0 10px; } /* 大框 */ a:hover::before, a:hover::after { content: ""; display: block; position: absolute; top: -15%%; left: -14%%; width: 120%; height: 120%; border-style: solid; border-width: 4px; border-color: #DDD; } /* 小框 */ a:hover::after { top: 0%; left: 0%; width: 100%; height: 100%; border-width: 2px; }