[CSS] Dodaj ikonkę typu linku obok odnośnika bez użycia JavaScript

This version: blog.piotrnalepa.pl/2009/06/25/css-dodaj-ikonke-typu-linku-obok-odnosnika-bez-uzycia-javascript
Published: June 25, 2009
Author: Piotr Nalepa, Staff Software Engineer
Category: CSS
Feedback: Write to me · Post on X

This post is 17 years old. Browsers and tools may have changed since then, so check the code against current documentation before you use it.

W tym artykule pragnę zaprezentować jedną bardzo ciekawą i niecodzienną rzecz związaną z CSS. Mianowicie dokładanie obrazka w zależności od typu linka zaprezentowanego na stronie.

Wszystko się opiera na selektorach atrybutów umiesczonych w nawiasach kwadratowych --> [ ]. Dzięki nim możemy określić pewne zależności do jakich ma sie odnosić dany kod CSS.
Przejdźmy więc do przykładu. W tym przypadku kod CSS wygląda następująco:

Example 1CSS

a[href^="http://"] {
	background: transparent url(../demo/ikony/link.png) center left no-repeat;
	display: inline-block;
	padding-left: 28px;
	line-height: 30px;
}
a[href$='.png'] {
	background: transparent url(../demo/ikony/png_file.png) center left no-repeat;
	display: inline-block;
	padding-left: 28px;
	line-height: 30px;
}
a[href$='.jpg'] {
	background: transparent url(../demo/ikony/jpg_file.png) center left no-repeat;
	display: inline-block;
	padding-left: 28px;
	line-height: 30px;
}

Jak widać, zawiera on nietypowe znaczniki, z którymi się dość rzadko można spotkać na co dzień. To właśnie daje nam tak wspaniałą możliwość zdefiniowana w którego typu linku ma się pojawić dany obrazek 🙂
Tutaj zamieszczam demo z tego artykułu.

Share: LinkedIn X Bluesky
Feedback: Write to me Post on X

About the author

Piotr Nalepa

Staff Software Engineer

I've been writing this blog since 2009 and building for the web professionally for 14 years. Today I lead the frontend of the Cosmos platform at Bishop Fox, where I've been since day one of the project. Before that I worked at OLX, KUDO, Auto1 and eZ Systems. Here I write about what I've learned in practice: JavaScript, TypeScript, React, CSS and frontend architecture. I've also spoken at conferences across Poland and Europe. Got a question or an idea for a post? Let me know!

About the author

Related posts