Többféle aláhúzás

Gondolom már mindenki találkozott életében aláhúzott szöveggel,hiszen az is ugyan úgy egy kiemelési forma,mint a félkövér vagy a dőlt betűtípus. Amit azonban már kevesebben tudnak,hogy mennyi féle képen is lehet ezt testreszabni.

Egyszerű aláhúzás

Kezdjük is a legalapvetőbb megoldással,amit tízből minimum nyolc használ,ez pedig nem más mint az egyszerű aláhúzás,ami így néz ki:

Egyszerű aláhúzás

underline, u { /* aláhúzott szöveg */
text-decoration: underline;
}

Az aláhúzott szöveget természetesen lehet még variálni,pl. az aláhúzás színét vagy stílusát megváltoztatni:

Egyszerű aláhúzás

underline, u { /* aláhúzott szöveg */
text-decoration: underline;
text-decoration-color: white;
text-decoration-style: dotted;
}

Alsó vonal elhelyezése

A következő módszer amit már kevésbé ismernek,az alsó vonal elhelyezése a szöveg alá. Ennek viszont van egy aprócska kitérője,hogy a kiemelni kívánt szöveget mindenféle képpen spanok közé kell helyezni,mivel ha csak megadjuk az aláhúzást,akkor az egész bekezdésre érvényes lesz a beállítás. Ez így néz ki:

Egyszerű aláhúzás

.szoveg / #szoveg span { /* a span formázása */
border-bottom: solid 2px #795aff;

Vagy akár felül

.szoveg / #szoveg span { /* a span formázása */
border-top: solid 2px #d65aff;
}

Természetesen ezt a változatot is lehet testreszabni,sőt itt már a vonal helyzetét is meg lehet szabni,ugyan is sok esetben az a baj a sima aláhúzással,hogy a talpas betűtípusoknál a vonal hozzáér a betűhöz. Itt a vonalat már kellő képpen lejjebb lehet vinni:

Egyszerű aláhúzás

.szoveg / #szoveg span { /* a span formázása */
border-bottom: dashed 2px #89ff5a;
padding-bottom: 6px;
}

Árnyék használata

Ez az én új kedvenc módszerem aláhúzott kiemelésnél,hiszena hogy láthatjátok rengetegszer használok pl. modul címeknél aláhúzást,olyankor az előbb említett módszert használtam,de ahogy említettem,a modul címeit spanok közé kellett raknom. Viszont,az új árnyék módszer amit használok sokkal egyszerűbb,a .css kódban meg kell csak határozni ezt az egyszerű beállítást,és már működik is így:

Egyszerű aláhúzás

.szoveg / #szoveg span { /* a span formázása */
box-shadow: 0 3px 0 0 #b7ff5a;
padding-bottom: 6px;

Vagy akár felül

.szoveg / #szoveg span { /* a span formázása */
box-shadow: 0 -3px 0 0 #ffe25a;
padding-top: 6px
}

Aláhúzási variációk

dotted – pontozott
dashed – szaggatott
solid – sima
double – dupla
groove – belső dombor
ridge – külső szél dombor