Ob podčrtani besedi na spletni strani vsekakor pričakujemo povezavo (link). V kolikor imate na spletnem mestu več različnih tipov povezav, to verjetno rešujete z različnimi barvami ali debelino. CSS pa nam prinaša tudi alternativo - različno podčrtavanje povezav. Nalogo zelo dobro opravi “trik” z uporabo border-bottom lastnosti.

Najprej izključite klasično podčrtavanje:

text-decoration: none;

Nato pa se poigrajte. Za podčrtavanje bomo uporabili tri border lastnosti:

border-bottom-width

Najprej določimo širino našega podčrtavanja. Možno je vnesti ročno širino (px, em, pt, itn.) ali pa tri vnaprej določene (thin, medium, thick).

border-bottom-style

Zatem določimo stil podčrtavanja. Možnosti je tu precej (enojna, dvojna, pikčasta črta), nekatere pa dajo precej zanimive učinke (groove, ridge, inset, outset). Vse vrednosti z razlago najdete tule.

border-bottom-color

Za konec seveda lahko določimo kakšne barve bo naše podčrtavanje.

Vse tri lasnosti lahko seveda združimo v border-bottom, kar sem storil tudi sam v spodnjih primerih, kjer vam za konec prikazujem nekaj primerov uporabe:

Prva povezava:border-bottom: 3px dotted #CCFF00;

Druga povezava:border-bottom: 1px groove #990000;

Tretja povezava:border-bottom: 2px dashed #000000;

Četrta povezava:border-bottom: 3px double #FF0000;