{"id":354,"date":"2015-05-24T03:58:14","date_gmt":"2015-05-24T03:58:14","guid":{"rendered":"http:\/\/www.cssportal.com\/blog\/?p=354"},"modified":"2024-02-28T23:27:59","modified_gmt":"2024-02-28T23:27:59","slug":"visual-external-link-with-css","status":"publish","type":"post","link":"https:\/\/www.cssportal.com\/blog\/visual-external-link-with-css\/","title":{"rendered":"Visual External Link with CSS"},"content":{"rendered":"<p>This is a simple snippet to show the end user a visual example of when they are clicking on an external link from your website. It uses the :after pseudo class to show an image that represents an external link.<!--more--><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.cssportal.com\/blog\/wp-content\/uploads\/2015\/05\/external-links.png\" alt=\"external-links\" width=\"300\" height=\"196\" class=\"aligncenter size-full wp-image-355\" \/><\/p>\n<p>Lets look at the following HTML code: <\/p>\n<pre class=\"language-html\"><code><xmp><ul>\r\n   <li><a href=\"#\">CSS Portal<\/a><\/li>\r\n   <li><a href=\"#\" class=\"external\">Google<\/a><\/li>\r\n   <li><a href=\"#\" class=\"external\">Bing<\/a><\/li>\r\n   <li><a href=\"#\">CSS Portal Blog<\/a><\/li>\r\n   <li><a href=\"#\">CSS Portal Properties<\/a><\/li>\r\n<\/ul>\r\n<\/xmp><\/code><\/pre>\n<p>The above code represents 5 potential links, here we have two links that point to an external page, they are: Google and Bing. To each of these links, we have added an <span class=\"code\">external<\/span> class which will display an image for an external link.<\/p>\n<p>The following CSS code is used to style our links:<\/p>\n<pre class=\"language-css\"><code>.external:after {\r\n   content:url(external.png);\r\n   margin-left:5px;\r\n   vertical-align:middle;\r\n}\r\n<\/code><\/pre>\n<p>A break down of the CSS is:<br \/>\n<span class=\"code\"><a href=\"http:\/\/www.cssportal.com\/css-properties\/content.php\">content<\/a><\/span> &#8211; Here we place the location for our external link with the content property.<br \/>\n<span class=\"code\"><a href=\"http:\/\/www.cssportal.com\/css-properties\/margin-left.php\">margin-left<\/a><\/span> &#8211; As we don&#8217;t want the image touching our link, we add a margin of 5px to the left of the image.<br \/>\n<span class=\"code\"><a href=\"http:\/\/www.cssportal.com\/css-properties\/vertical-align.php\">vertical-align<\/a><\/span> &#8211; This property will vertically align the image to the middle.<\/p>\n<p>That&#8217;s it for this snippet, we hope you&#8217;ll find it useful for your websites.<\/p>\n<p>With thanks to <a class=\"external\" rel=\"nofollow\" target\"_blank\" href=\"http:\/\/iconfinder.com\">Icon Finder<\/a> for the image. As can be seen (hopefully), there is an image to the right of this link to represent an external link.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is a simple snippet to show the end user a visual example of when they are clicking on an external link from your website. It uses the :after pseudo class to show an image that represents an external link.<\/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-354","post","type-post","status-publish","format-standard","hentry","category-css","wpautop"],"_links":{"self":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/354","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=354"}],"version-history":[{"count":1,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/354\/revisions"}],"predecessor-version":[{"id":449,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/354\/revisions\/449"}],"wp:attachment":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/media?parent=354"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/categories?post=354"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/tags?post=354"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}