::before,::after
2016-09-18 10:31
204 查看
效果图:
代码:
代码:
<!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>
相关文章推荐
- jQuery中的append()和prepend(),after()和before()的区别
- 你所不知的 CSS ::before 和 ::after 伪元素用法
- 利用before、after制作提示框
- css中伪元素:before :after的作用
- 关于Android Animation的setFillBefore、setFillAfter和setFillEnable
- css结合伪元素before,after制作网页返回顶部的图标
- 理解伪元素 :before 和 :after
- :before和:after
- display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -w
- spring AOP @Around @Before @After 区别
- Junit测试中的setup和teardown 和 @before 和 @After 方法
- page-break-before和page-break-after
- CSS伪类元素 :after :before
- Working with BeforeProperties and AfterProperties on SPItemEventReceiver
- 首页 > 程序开发 > 软件开发 > Java > 正文 Java中单元测试中:@BeforeClass,@Before,@Test,@After,@AfterClass中的问题详解
- :before 和 :after的多用途实践 — 特效篇(1)
- jQuery中的append()和prepend(),after()和before()的差别
- jQuery的append/prepend和after/before有什么区别?
- js如何控制css伪元素内容(before,after)
- 利用before和after设置三角边框