armyofghosts

Link hover brackets (CSS)

Oct 17th, 2014
720
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 0.81 KB | None | 0 0
  1. .linkhover a::before,
  2. .linkhover a::after {
  3. display: inline-block;
  4. opacity: 0;
  5. -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
  6. -moz-transition: -moz-transform 0.3s, opacity 0.2s;
  7. transition: transform 0.3s, opacity 0.2s;
  8. }
  9.  
  10. .linkhover a::before {
  11. padding-right:10px;
  12. content: '[';
  13. -webkit-transform: translateX(20px);
  14. -moz-transform: translateX(20px);
  15. transform: translateX(20px);
  16. }
  17.  
  18. .linkhover a::after {
  19. padding-left:10px;
  20. content: ']';
  21. -webkit-transform: translateX(-20px);
  22. -moz-transform: translateX(-20px);
  23. transform: translateX(-20px);
  24. }
  25.  
  26. .linkhover a:hover::before,
  27. .linkhover a:hover::after,
  28. .linkhover a:focus::before,
  29. .linkhover a:focus::after {
  30. opacity: 1;
  31. -webkit-transform: translateX(0px);
  32. -moz-transform: translateX(0px);
  33. transform: translateX(0px);
  34. }
Advertisement
Add Comment
Please, Sign In to add comment