Advertisement
bouquetree

sliding underline on links

Aug 27th, 2016
112
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.11 KB | None | 0 0
  1. /*SLIDE IN FROM LEFT*/
  2. a {
  3. color:#6d7fff;
  4. text-decoration:none;
  5. position:relative;
  6. -webkit-transition: all 0.4s ease-in-out;
  7. -moz-transition: all 0.4s ease-in-out;
  8. -o-transition: all 0.4s ease-in-out;
  9. transition: all 0.4s ease-in-out;
  10. }
  11. a:hover {
  12. color:#000;
  13. }
  14. a:after {
  15. content:'';
  16. position:absolute;
  17. bottom:0;
  18. left:0;
  19. width:0%;
  20. border-bottom:1px solid #000;
  21. transition:0.4s;
  22. }
  23. a:hover:after {
  24. width:100%;
  25. }
  26.  
  27. /*SLIDE IN FROM RIGHT*/
  28. a {
  29. color:#6d7fff;
  30. display: inline-block;
  31. position: relative;
  32. text-decoration:none;
  33. -webkit-transition: all 0.4s ease-in-out;
  34. -moz-transition: all 0.4s ease-in-out;
  35. -o-transition: all 0.4s ease-in-out;
  36. transition: all 0.4s ease-in-out;
  37. }
  38. a:hover {
  39. color:#000;
  40. }
  41. a:after {
  42. content: '';
  43. display: block;
  44. position: absolute;
  45. right: 0;
  46. bottom: 0;
  47. height: 1px;
  48. width: 0;
  49. background: transparent;
  50. transition: width .5s ease, background-color .5s ease;
  51. }
  52. a:hover:after {
  53. width: 100%;
  54. background:#000;
  55. }
  56.  
  57. /*SLIDE IN AND OFF*/
  58. a {
  59. color:#6d7fff;
  60. text-decoration:none;
  61. position:relative;
  62. -webkit-transition: all 0.4s ease-in-out;
  63. -moz-transition: all 0.4s ease-in-out;
  64. -o-transition: all 0.4s ease-in-out;
  65. transition: all 0.4s ease-in-out;
  66. }
  67. a:hover {
  68. color:#000;
  69. }
  70. a:before {
  71. content: '';
  72. display: block;
  73. position: absolute;
  74. left: 0;
  75. bottom: 0;
  76. height: 3px;
  77. width: 0;
  78. transition: width 0s ease, border-bottom .5s ease;
  79. }
  80. a:after {
  81. content: '';
  82. display: block;
  83. position: absolute;
  84. right: 0;
  85. bottom: 0;
  86. height: 3px;
  87. width: 0;
  88. border-bottom: 1px solid #000;
  89. transition: width .5s ease;
  90. }
  91. a:hover:before {
  92. width: 100%;
  93. border-bottom: 1px solid #000;
  94. transition: width .5s ease;
  95. }
  96. a:hover:after {
  97. width: 100%;
  98. border-bottom: transparent;
  99. transition: all 0s ease;
  100. }
  101.  
  102. /*SLIDE MIDDLE OUT*/
  103. a {
  104. color:#6d7fff;
  105. display: inline-block;
  106. position: relative;
  107. text-decoration:none;
  108. }
  109. a:hover {
  110. color:#000;
  111. }
  112. a:after {
  113. content: '';
  114. display: block;
  115. margin: auto;
  116. height: 1px;
  117. width: 0px;
  118. background: transparent;
  119. transition: width .5s ease, background-color .5s ease;
  120. }
  121. a:hover:after {
  122. width: 100%;
  123. background: #000;
  124. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement