A class icon-link href compare_step2_link_url how to add target blank

If you want to add an icon to `a` element that links to an external website, then you can depend on the `href` or `[target="_blank"]` attribute.

Inhaltsverzeichnis Show

Definition and Usage
Browser Support
Attribute Values
Default target
a target=”_blank” Open in New Browser Tab (or Window)
Why Open in a New Browser?
Open All External Links in a New Tab with JavaScript
Reasons not to use `target=”_blank”
Browser Support for target

a[target='_blank'] {

align-items: center;

display: flex;

}

a[target='_blank']:after {

content: url(/link/to/icon.svg);

margin-left: 0.25rem;

}

The `content` property can be a string that appends to the link:

a[target='_blank']:after {

content: ' (external)';

}

Using an icon font such as Font Awesome is another option:

a[target='_blank']:after {

content: ' \f08e';

font-family: 'FontAwesome';

}

This approach relies on the `href` attribute. A link is treated as external if

It doesn't match with the domain of website
It isn't an anchor (doesn't start with `#`)
It doesn't start with `/`

It's up to you to define more conditions here. But with the set of conditions above, the `:after` looks like

a:not([href*='domain.com']):not([href^='#']):not([href^='/']):after {

}

Ignore case sensitivity in a CSS attribute selector

❮ HTML <a> tag

The target attribute specifies where to open the linked document:

<a href="https://www.w3schools.com" target="_blank">Visit W3Schools</a>

Try it Yourself »

Definition and Usage

The target attribute specifies where to open the linked document.

Browser Support

Attribute
target	Yes	Yes	Yes	Yes	Yes

Syntax

Attribute Values

Value	Description
_blank	Opens the linked document in a new window or tab
_self	Opens the linked document in the same frame as it was clicked (this is default)
_parent	Opens the linked document in the parent frame
_top	Opens the linked document in the full body of the window
framename	Opens the linked document in the named iframe

❮ HTML <a> tag

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more

Attribute ofHow To Use a (For Creating Hyperlinks) In HTMLWhat does How To Use The <a> To Make Links & Open Them Where You Want! do?Specifies the context in which the linked resource will open.<a href="/" target="_blank">The home page will open in another tab.</a>

The home page will open in another tab.

The only currently relevant value of target is _blank. The other values of target were used to specify specific frames. However, frames have been deprecated in HTML5.

Default target

If no target is specified, the link will open in the current context, unless the user or browser specifies otherwise.

a target=”_blank” Open in New Browser Tab (or Window)

The target attribute specifies where the linked document will open when the link is clicked. The default is the current window. If target="_blank", the linked document will open in a new tab or (on older browsers) a new window.

Why Open in a New Browser?

The most common reason to use `target=”_blank” is so that offsite links open in a separate tab. This allows a user to click on a reference and come back to it later without leaving the current page. It keeps visitors on your site longer and improves most of your metrics: bounce rate, conversion, pages visited.

Open All External Links in a New Tab with JavaScript

You don’t need to manually add target="_blank" to every link on your site. If you link out a lot (which you should do), it is easy to add some JavaScript code to your site and turn all external links into _blank links automatically.

jQuery(document.links) .filter(function() { return this.hostname != window.location.hostname; }) .attr('target', '_blank');

(You can see a slightly modified form of this code in action on every page of this website.) This trick requires jQuery, but there is a good chance you are using it already. It is used in the most popular frameworks and content management systems, including WordPress, Drupal, and Twitter Bootstrap. If you need to do it without jQuery, that can be done as well. Here is a “plain JavaScript” version:

function externalLinks() { for(var c = document.getElementsByTagName("a"), a = 0;a < c.length;a++) { var b = c[a]; b.getAttribute("href") && b.hostname !== location.hostname && (b.target = "_blank") } } ; externalLinks();

Besides making it easier, this cleans up your markup considerably.

Reasons not to use `target=”_blank”

Some people argue that users do not prefer to open links in a new browsing context. They think that doing so is similar to popup ads and other annoying behavior. With the rise of tabbed browsing, this argument has largely gone away. Most users prefer to open links in a new tab, because it allows them to come queue referenced links for later reading without losing their current browsing context.

Value Name	Notes
_blank	Opens the linked document in a new tab or window.
_parent	Opens the link in the parent frame. Frames are deprecated in HTML5.
_self	Open the link in the current frame.
_top	Opens the link in the top-most frame. Frames are deprecated in HTML5.
frame name	Opens the link in the named frame. Frames are deprecated in HTML5.

Attribute name	Values	Notes
hreflang		Specifies the language of the linked resource.
download		Directs the browser to download the linked resource rather than opening it.
target	_blank _parent _self _top frame name	Specifies the context in which the linked resource will open.
title	text	Defines the title of a link, which appears to the user as a tooltip.
href	url	Specifies the linked document, resource, or location.
name