Make Arrow for Link Open New Tab use CSS

Bahan-bahan atau bumbu-bumbu koding sudah bertebaran dimana-mana. Tinggal urusan kreatifitas kita saja dalam urusan pemakaian. Sudah tentu dengan pertimbangan yang matang. Seperti tutorial ringan berikut tentang bagaimana cara membuat link external. Maksudnya di sini adalah kita akan memberikan tanda kepada link dengan perintah "_blank", "_top", "top", "new" agar pendatang bisa mengetahui bahwasannya link tersebut akan terbuka new tab. Dahulu trik ini bisa kita gunakan dengan bantuan jQuery script. Sekarang AA Koben akan kasih tauk bagaimana cara membuat hal serupa murni dengan menggunakan CSS.

Source sumber tutorial gue dapet dari codepen.io/Antariano/pen/vNeJrN
Bagi sobat yang suka dengan gaya dari sumber, silahkan langsung pakai dengan kode yg sudah disediakan. Gue akan beri kalian dengan kode yg sudah modifikasi. Berikut kode CSS sumber yg sudah di compiled

a {
display: inline-block;
color: #1A0DAB;
transition: all .2s ease;
text-decoration: none;
padding: .1em;
position: relative;
z-index: 10;
}
a:before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 1%;
border-bottom: 1px dotted #1A0DAB;
background-color: transparent;
transition: all .3s ease;
z-index: -1;
}
a:hover {
text-decoration: none;
color: #fff;
}
a:hover:before {
height: 100%;
border: none;
background-color: #3B78E7;
}
a[target="_blank"]:after {
content: '[Opens in new tab]';
position: absolute;
top: 100%;
font-style: italic;
left: 0;
transform: translateY(-100%);
background: #3B78E7;
width: 100%;
text-align: center;
height: 16px;
font-size: 11px;
line-height: 12px;
transition: all 0.2s ease-out;
color: rgba(255, 255, 255, 0.85);
opacity: 0;
z-index: -1;
pointer-events: none;
}
a[target="_blank"]:hover:after {
transform: translateY(0);
opacity: 1;
}

Midification CSS coded...

a {
display: inline-block;
color: #1A0DAB;
transition: all .2s ease;
text-decoration: none;
padding: 0;
position: relative;
z-index: 10;
}
a:before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 1%;
z-index: -1;
}
a:hover {
text-decoration: none;
}
a[target="_blank"]:after {
content: '\2197';
position: absolute;
top: 15%;
font-weight: bold;
right: 0;
width: 100%;
text-align: right;
height: 16px;
font-size: large;
line-height: 16px;
transition: all 0.2s ease-out;
color: #006621;
opacity: 0;
z-index: -1;
pointer-events: none;
}
a[target="_blank"]:hover:after {
transform: translateY(0);
opacity: 1;
right: -3px;
}
a[target="_blank"]:hover {
padding-right: 10px;
}

Karena properti kode tidak memakai unik ID, maka yg harus sobat lakukan adalah menambahkan kode CSS link tersebut ke dalam kode link yg sudah kalian miliki! Setiap penulisan syntax HTML seperti berikut<a href="http://google.com" target="_blank">TITLE</a>DEMO: codepen.io/beben-koben/pen/QjqRZY