Jifunze kwa urahisi jinsi ya kuweka au kuondoa underline kwenye links za HTML kwa kutumia CSS. Mwongozo huu unaonyesha hatua mbalimbali, pamoja na code sahihi na mifano ya vitendo kwa wanaojifunza web design.
📝 FULL BLOG POST
Jinsi ya Kuweka au Kuondoa Underline Kwenye Links za HTML (Mwongozo Kamili)
Katika HTML, links (au <a> tags) huwa na underline kwa default. Hata hivyo, wakati mwingine unaweza kutaka kuiondoa kwa ajili ya muonekano mzuri, au kuirudisha inapohitajika.
Katika makala hii, utaona jinsi ya kufanya yote mawili—kuweka underline na kuiondoa underline—kwa kutumia CSS.
✅ 1. Kuondoa Underline (text-decoration: none)
Njia hii hutumika pale unapotaka links zako ziwe safi bila mistari chini.
CODE:
<style>
a {
text-decoration: none; /* Inaondoa underline */
color: #007bff;
}
a:hover {
text-decoration: underline; /* Inaonekana uki-hover */
}
</style>
<p>Hii ni <a href="#">link isiyo na underline</a>.</p>
✅ 2. Kuweka Underline kwa Link Zote
CODE:
<style>
a {
text-decoration: underline;
}
</style>
<a href="#">Hii ni link yenye underline</a>
✅ 3. Kuweka Underline Kwenye Link Fulani Tu (Class)
CODE:
<style>
.underline {
text-decoration: underline;
}
</style>
<a href="#" class="underline">Link yenye underline</a>
✅ 4. Inline CSS (Kuweka moja kwa moja kwenye tag)
CODE:
<a href="#" style="text-decoration: underline;">Link</a>
🎯 Ni Lini Utumie Underline?
Kwenye blog posts kwa kuonyesha hyperlinks muhimu
Kwenye navigation menus ikiwa unataka kusisitiza menu item
Kwenye buttons mara chache (kawaida hutumika none)
🔗 Links Za Kujifunza Zaidi
🌐 Faulink Official Website:
https://www.faulink.com/
📘 Jifunze Web Design & Programming (Tutorials / Mifumo):
https://www.faulink.com/excel_mifumo.php
📲 Piga / WhatsApp kwa msaada wa haraka:
https://wa.me/255693118509