{"id":362,"date":"2015-06-28T01:28:53","date_gmt":"2015-06-28T01:28:53","guid":{"rendered":"http:\/\/www.cssportal.com\/blog\/?p=362"},"modified":"2024-02-28T23:27:53","modified_gmt":"2024-02-28T23:27:53","slug":"css-animated-underline-links","status":"publish","type":"post","link":"https:\/\/www.cssportal.com\/blog\/css-animated-underline-links\/","title":{"rendered":"CSS Animated Underline Links"},"content":{"rendered":"<style>\n.hoverme {\n  text-decoration: none;\n  position: relative;\n  color: #3366FF;\n  border-bottom:none;\n}\n.hoverme:after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 0%;\n  border-bottom: 2px solid #3366FF;\n  transition: 0.4s;\n}\n.hoverme:hover:after {\n  width: 100%;\n}\n<\/style>\n<p>With CSS you can add some great effects using animation. In this blog, we&#8217;ll show you how to animate the links underline feature, the link will have the underline move from right to left, this can also be easily changed to go from left to right by changing only one property.<!--more--><\/p>\n<h3><a class=\"hoverme\" href=\"#\">Hover Over Me<\/a><\/h3>\n<p>To achieve this animation, we first need to remove the underline from the link using the property <span class=\"code\"><a href=\"http:\/\/www.cssportal.com\/css-properties\/text-decoration.php\">text-decoration<\/a><\/span> and setting it to <i>none<\/i>, we&#8217;ll also need to set the <span class=\"code\"><a href=\"http:\/\/www.cssportal.com\/css-properties\/position.php\">position<\/a><\/span> property to <i>relative<\/i>. You can also set the color for the links as shown in the example below.<\/p>\n<pre class=\"language-css\"><code>a {\r\n  text-decoration: none;\r\n  position: relative;\r\n  color: #3366FF;\r\n}<\/code><\/pre>\n<p>Now that the link has no underline, we can now apply the following css code using the pseudo element <i>:after<\/i> to achieve our desired animation. Here you can see that we are using the <span class=\"code\"><a href=\"http:\/\/www.cssportal.com\/css-properties\/transition.php\">transition<\/a><\/span> property to display our underline animation. By changing the <i>left<\/i> property to <i>right<\/i>, the animation will move from the left to the right. The underline effect is achieved using the <span class=\"code\"><a href=\"http:\/\/www.cssportal.com\/css-properties\/border-bottom.php\">border-bottom<\/a><\/span> property where you can set the color, border thickness and border style.<\/p>\n<pre class=\"language-css\"><code>a:after {\r\n  content: '';\r\n  position: absolute;\r\n  bottom: 0;\r\n  left: 0;\r\n  width: 0%;\r\n  border-bottom: 2px solid #3366FF;\r\n  transition: 0.4s;\r\n}<\/code><\/pre>\n<p>The last section of code is needed for when the user hovers over a link, the <span class=\"code\"><a href=\"http:\/\/www.cssportal.com\/css-properties\/width.php\">width<\/a><\/span> property is set to <i>100%<\/i>. This setting will change the border to <i>100%<\/i> and will help achieve to animation effect, once the user moves the cursor off the link, the property will go back to <i>0%<\/i> as in the section above and the underline will disappear.<\/p>\n<pre class=\"language-css\"><code>a:hover:after {\r\n  width: 100%;\r\n}<\/code><\/pre>\n<p>Well that&#8217;s about it for this blog, click the button below to experiment with this animation.<\/p>\n<p><a target=\"_blank\" class=\"btn btn-primary\" href=\"https:\/\/www.cssportal.com\/tryit\/index.php?file=blog\/animated-underline\" rel=\"noopener\">Demo<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>With CSS you can add some great effects using animation. In this blog, we&#8217;ll show you how to animate the links underline feature, the link will have the underline move from right to left, this can also be easily changed to go from left to right by changing only one property.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-362","post","type-post","status-publish","format-standard","hentry","category-css","wpautop"],"_links":{"self":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/362","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/comments?post=362"}],"version-history":[{"count":7,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/362\/revisions"}],"predecessor-version":[{"id":689,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/362\/revisions\/689"}],"wp:attachment":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/media?parent=362"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/categories?post=362"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/tags?post=362"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}