Bagaimana cara menghapus garis bawah untuk jangkar (tautan)?

313

Apakah ada (dalam CSS) untuk menghindari garis bawah untuk teks dan tautan yang diperkenalkan di halaman ..?

Steven
sumber
8
<penantic> Anda tidak pernah bisa berasumsi bagaimana browser akan merender HTML Anda. tag membuat jangkar yang dipilih peramban untuk ditampilkan sebagai garis bawah secara default. kamu adalah satu-satunya tanda garis bawah. jawaban di bawah adalah jawaban CSS </pendantic>
Akun mati
44
Ironi bahwa seseorang cukup bertele-tele untuk membuat komentar ini, tetapi tidak cukup bertele-tele untuk mengeja kata dengan benar (atau bahkan secara konsisten!) Membuat saya terpesona.
Technetium
Selain jawaban di bawah ini, penanganan a:hoverjuga harus dipertimbangkan, sebagian besar browser populer cenderung menunjukkan garis bawah pada jangkar pada saat melayang.
Fr0zenFyr

Jawaban:

517

Gunakan CSS. ini menghilangkan garis bawah dari adan uelemen:

a, u {
    text-decoration: none;
}

Terkadang Anda perlu mengganti gaya lain untuk elemen, dalam hal ini Anda dapat menggunakan !importantpengubah pada aturan Anda:

a {
    text-decoration: none !important;
}
Emil Vikström
sumber
1
Jika color: black !important;akan ditambahkan body, apakah itu juga akan mengatur semua elemen, termasuk jangkar, jangkar yang dikunjungi, jangkar melayang agar selalu hitam?
Ωmega
Ωmega Δ, tampaknya tidak, dan terima kasih untuk menunjukkannya, saya menemukan kesalahan dalam aturan tubuh secara keseluruhan. Saya telah memperbarui jawaban saya.
Emil Vikström
Apa yang saya temukan adalah bahwa jika Anda menetapkan gaya text-decoration: none !important;untuk bodyelemen, maka itu berfungsi untuk jangkar hanya ketika Anda secara eksplisit mengatur gaya text-decoration: inherit;untuk aelemen.
Ωmega
7
Biasanya lebih baik untuk menghindari !importantdan menggunakan spesifisitas dan kardinalitas untuk mengesampingkan gaya, jika tidak, Anda dapat berakhir dengan lembar gaya yang penuh !importanttanpa pemahaman tentang struktur yang membuatnya perlu. Ini adalah bau kode IMO.
Mike Lyons
!importantseperti memiliki nuklir. Tapi begitu Anda mulai turun dan tergoda untuk menggunakan !importantunsur-unsur lain mungkin mendapatkannya (nuklir) dan keuntungan hilang dalam kebuntuan, yang bagus untuk dunia, karena MUD memastikan perdamaian, tetapi di dunia css, kedamaian seperti itu berarti Anda tidak dapat memberikan sesuatu keuntungan.
JasonGenX
27

Css adalah

text-decoration: none;

dan

text-decoration: underline;
DanDan
sumber
16

Ini akan menghapus warna Anda serta garis bawah yang ada pada anchor tag

 a {
     text-decoration: none ;
  }
a:hover
  {
    color:white;
    text-decoration:none;
    cursor:pointer;
   }
Ashwin Shahi
sumber
11

Opsi paling sederhana adalah ini:

<a style="text-decoration: none">No underline</a>

Tentu saja, mencampur CSS dengan HTML (yaitu CSS sebaris) bukan ide yang baik, terutama ketika Anda menggunakan atag di semua tempat.
Karena itu, sebaiknya tambahkan ini ke stylesheet:

a {
    text-decoration: none;
}

Atau bahkan kode ini dalam file JS:

var els = document.getElementsByTagName('a');

for (var el = 0; el < els.length; el++) {
    els[el].style["text-decoration"] = "none";
}
XLogic
sumber
Iphone / Android bukanlah tolok ukur yang baik karena tidak mewakili rendering HTML Gmail atau Outlook yang mundur.
Stuart
@ XLogic: Terima kasih banyak
Monika Patel
6

Gunakan CSS untuk menghapus text-decorations.

a {
    text-decoration: none;
}
Alan Haggai Alavi
sumber
6

Opsi terbaik untuk Anda jika Anda hanya ingin menghapus garis bawah dari anchor link saja-

    #content a{
                text-decoration-line:none;
                }

Ini akan menghapus garis bawah.

Selanjutnya Anda dapat menggunakan sintaks yang sama untuk memanipulasi gaya lain juga menggunakan-

                text-decoration: none;
                text-decoration-color: blue;
                text-decoration-skip: spaces;
                text-decoration-style: dotted;

Semoga ini membantu!

PS- Ini adalah jawaban pertama saya!

Praveen Kaushik
sumber
4

dalam kasus saya ada aturan tentang efek hover oleh jangkar, seperti ini:

#content a:hover{
border-bottom: 1px solid #333;
}

Tentu saja, text-decoration:none;tidak bisa membantu dalam situasi ini. Dan saya menghabiskan banyak waktu sampai saya menemukannya.

Jadi: Garis bawah jangan dikacaukan dengan batas-bawah.

Aleksandr Khomenko
sumber
4

Kadang akan ditimpa oleh beberapa rendering UI UI. Lebih baik digunakan:

a.className {
    text-decoration: none !important;
}
Sanjib Karmakar
sumber
1
Ini ide yang buruk. stackoverflow.com/questions/8360190/…
Benjamin Gruenbaum
2

Untuk memberikan perspektif lain terhadap masalah tersebut (seperti yang disimpulkan dari judul / isi posting asli):

Jika Anda ingin melacak apa yang membuat garis bawah nakal di HTML Anda, gunakan alat debugging. Ada banyak pilihan:

Untuk Firefox ada FireBug;

Untuk Opera ada Dragonfly (disebut "Alat pengembang" di menu Tools-> Advanced; dilengkapi dengan Opera secara default);

Untuk IE ada "Internet Explorer Developer Toolbar", yang merupakan unduhan terpisah untuk IE7 dan di bawahnya, dan terintegrasi dalam IE8 (tekan F12).

Saya tidak tahu tentang Safari, Chrome, dan peramban minoritas lainnya, tetapi Anda mungkin harus memiliki setidaknya satu dari tiga di atas pada mesin Anda.

Vilx-
sumber
1

Saat Anda ingin menggunakan tag jangkar hanya sebagai tautan tanpa gaya tambahan (seperti garis bawah di hover atau warna biru) tambahkan class="no-style"ke tag jangkar. Kemudian di stylesheet global Anda, buat kelas "no-style".

.no-style { text-decoration: none !important; }

Ini memiliki dua keunggulan.

  1. Itu tidak akan memengaruhi semua tag anchor, hanya yang dengan kelas "tanpa gaya" yang ditambahkan padanya.
  2. Ini akan mengesampingkan gaya lain yang mungkin mencegah pengaturan dekorasi teks menjadi tidak ada.
Frederick John
sumber
0

Jangan lupa untuk menyertakan stylesheet menggunakan tag tautan

http://www.w3schools.com/TAGS/tag_link.asp

Atau lampirkan CSS di dalam tag gaya di halaman web Anda.

<style>
  a { text-decoration:none; }
  p { text-decoration:underline; }
</style>

Saya tidak akan merekomendasikan menggunakan garis bawah pada apa pun selain tautan, garis bawah umumnya diterima sebagai sesuatu yang dapat diklik. Jika tidak dapat diklik, jangan digarisbawahi.

Dasar-dasar CSS dapat diambil di w3schools

JasonS
sumber
0
<u>

adalah tag yang usang.

Menggunakan...

<span class="underline">My text</span>

dengan file CSS yang mengandung ...

span.underline
{
    text-decoration: underline;
}  

atau hanya...

<span style="text-decoration:underline">My Text</span>
Oundless
sumber
0

Gunakan properti css,

text-decoration:none;

Untuk menghapus garis bawah dari tautan.

Smita Kagwade
sumber
0

Garis bawah dapat dihapus oleh properti CSS yang disebut dekorasi teks.

<style>
a{
text-decoration:none;
}
</style>

Jika Anda ingin menghapus garis bawah untuk teks yang ada dalam elemen selain a , sintaks berikut harus digunakan.

<style>
element-name{
text-decoration:none;
}
</style>

Ada banyak nilai dekorasi teks lainnya yang dapat membantu Anda mendesain tautan.

Sheraz
sumber
-1

Saya bermasalah dengan masalah ini dalam pencetakan web dan dipecahkan. Hasil yang diverifikasi.

a {
    text-decoration: none !important;
}

Berhasil!.

Incheol
sumber