Harici Linklere CSS ile Simge Ekleme
Artık sitemdeki yazıların içinde bulunan linklerin hangisinin site içine hangisinin başka bir siteye yönlendirdiği kolay bir şekilde anlaşılabiliyor. Çünkü harici linklerin yanında artık küçük bir simge bulunuyor. Örnek:
Github hesabıma bağlantı
Bu yazıya bağlantı
Bunu CSS sözde seçiciyi (pseudo selector) sadece http ve https ile başlayan bağlantıları hedef alacak şekilde yapılandırarak başarıyoruz.
Aşağıdaki kod parçacığını internette buldum, kendime göre değiştirdim.
.post-content a[href^="http:"]::after,
.post-content a[href^="https://"]::after {
content: "";
width: 0.75em;
height: 0.75em;
margin: auto 0.2em;
background-image: url("data:image/svg+xml,%0A%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m13 3 3.293 3.293-7 7 1.414 1.414 7-7L21 11V3z'/%3E%3Cpath d='M19 19H5V5h7l-2-2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2v-5l-2-2v7z'/%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
}
.post-content a[href^="https://taylantatli.com"]::after {
display: none !important;
}Bu kod parçacığı ile .post-content alanı içinde bulunan linkler, eğer site dışında bir yere yönlendiriyorsa yanlarında bunu belirten bir simgeye sahip oluyor.
Site içi bağlantılara simge eklenmesin diye kullandığımız alttaki display: none !important bölümü açıkçası beni rahatsız etti; bunun yerine :not([href^="https://taylantatli.com"]) şeklinde :not seçicisini kullanmak bana daha mantıklı geldi. Bundan dolayı kodu aşağıdaki şekilde değiştirdim. Aynı şeyi daha az satırla halletmiş oldum.
.post-content a[href^="http:"]:not([href^="https://taylantatli.com"])::after,
.post-content a[href^="https://"]:not([href^="https://taylantatli.com"])::after {
content: "";
width: 0.75em;
height: 0.75em;
margin: auto 0.2em;
background-image: url("data:image/svg+xml,%0A%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m13 3 3.293 3.293-7 7 1.414 1.414 7-7L21 11V3z'/%3E%3Cpath d='M19 19H5V5h7l-2-2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2v-5l-2-2v7z'/%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
}Kullandığım simgeyi SVG Repo'dan aldım. Siz herhangi bir yerden istediğiniz formatta simge kullanabilirsiniz. Simgeyi data URI'ye çevirmek için de URL-encoder for SVG aracını kullandım. Bu çevrimi yapmak mecburi değil tabi; normal bir şekilde simgenin bağlantısını ekleyerek de kullanabilirsiniz.
Orijinal İçerik: