Hapus garis bawah yang membandel dari tautan

542

Saya mencoba menampilkan tautan berwarna putih, tanpa garis bawah. Warna teks ditampilkan dengan benar sebagai putih, tetapi garis bawah biru tetap bertahan. Saya mencoba text-decoration: none;dan text-decoration: none !important;dalam CSS untuk menghapus tautan yang digarisbawahi. Tidak ada yang berhasil.

.boxhead .otherPage {
  color: #FFFFFF;
  text-decoration: none;
}

<div class="boxhead">
  <h2>
    <span class="thisPage">Current Page</span>
    <a href="myLink"><span class="otherPage">Different Page</span></a>
  </h2>
</div>

Luaskan cuplikan

Bagaimana saya bisa menghapus garis bawah biru dari tautan?

css hyperlink underline dmr
sumber

1

Yah itu harus pergi ketika Anda melakukan dekorasi teks: tidak ada. Apakah Anda yakin menerapkan ini ke elemen yang benar? Bisakah Anda memberikan kode contoh?

Davor Lucic

Di mana dekorasi teks: tidak ada yang digunakan?

antar

772

Seperti yang saya harapkan, Anda tidak menerapkan text-decoration: none;anchor ( .boxhead a) tetapi ke elemen span ( .boxhead).

Coba ini:

.boxhead a {
    color: #FFFFFF;
    text-decoration: none;
}

Davor Lucic
sumber

12

Tetapi bagaimana jika Anda memiliki teks yang mengelilingi rentang juga, dan Anda ingin teks sekitarnya memiliki garis bawahi garis bawah, tetapi teks dalam rentang tersebut tidak memilikinya?

JMTyler

4

@rebus, kamu tidak bisa? Kenapa tidak? Menyebabkan setidaknya IE7 + dan FireFox 4+ Anda bisa, tetapi tidak di Chrome untuk beberapa alasan. Inilah kode yang saya gunakan untuk bekerja di browser non-Chrome yang saya uji: .toc-list a > span{text-decoration:none !important;} Saya pikir pertanyaan @ JMTyler adalah sah; Saya mencari solusi yang sama.

Tony Topper

7

Tampaknya text-decorationtidak mendukung penggantian pada tag bersarang, seperti yang ditunjukkan di atas. Setelah Anda memiliki a { text-decoration: underline; }aturan yang diterapkan Anda tidak dapat de-menerapkannya misalnya dengan a .wish_this_were_not_underlined { text-decoration: none; }. Saya tidak dapat menemukan referensi untuk ini tetapi itu pengalaman saya (di Chrome).

Sebagian Mendung

2

Seperti yang lain di atas, saya tidak dapat menggarisbawahi teks dengan menerapkan, text-decoration: none;jadi kami memilih untuk menyembunyikan garis menggunakan text-decoration: underline; text-decoration-color: white;. / hack

Ryan Burbidge

1

jika Anda hanya mencoba menghapus garis bawah dari elemen di dalam jangkar, dan bukan seluruh jangkar. Anda perlu membuat elemen dalam blok-inline seperti: .boxhead .otherPage { display: inline-block; color: #FFFFFF; text-decoration: none; }

Patrick Denny

213

Tag anchor (tautan) juga memiliki pseudo-class seperti dikunjungi, mengarahkan kursor, dan aktif. Pastikan gaya Anda diterapkan ke negara bagian yang dipermasalahkan dan tidak ada gaya lain yang saling bertentangan.

Sebagai contoh:

a:hover, a:visited, a:link, a:active
{
    text-decoration: none;
}

Lihat W3.org untuk informasi lebih lanjut tentang aksi pengguna pseudo-class: hover,: aktif, dan: fokus.

JYelton
sumber

5

Saya pikir maksud Anda a:linkketika Anda mengatakana:click

artlung

6

Ini seharusnya jawaban yang sebenarnya diterima, karena saya mengalami masalah yang sama SETELAH mengklik tautan tombol saya. Properti yang dikunjungi masih berubah menjadi ungu ketika saya kembali ke halaman.

Doresoom

33

text-decoration: none !importantharus menghapusnya .. Apakah Anda yakin tidak ada yang border-bottom: 1px solidmengintai? (Lacak gaya yang dihitung di Firebug / F12 di IE)

Alex K.
sumber

4

Pengaturan border-bottom-style: none;memperbaikinya untuk saya.

Helder S Ribeiro

27

Cukup tambahkan atribut ini ke tag jangkar Anda

style="text-decoration:none;"

Contoh:

<a href="page.html"  style="text-decoration:none;"></a>

Atau gunakan cara CSS.

.classname a {
    color: #FFFFFF;
    text-decoration: none;
}

Nagarajan SR
sumber

16

Terkadang yang Anda lihat adalah bayangan kotak, bukan garis bawah teks.

Coba ini (menggunakan pemilih CSS apa pun yang sesuai untuk Anda):

a:hover, a:visited, a:link, a:active {

    text-decoration: none!important;

    -webkit-box-shadow: none!important;
    box-shadow: none!important;
}

jeffmjack
sumber

1

Yang ini harus menjadi jawabannya .. Terkadang, bayangan kotak memberi efek garis bawah.

Bhargav

Ini adalah jawaban, tetapi bukan yang terbaik. Ruang lingkupnya bersifat global dan tidak spesifik. Sesuatu seperti ini harus melakukan trik: .otherPage a:link {text-decoration:none;}; ulangi itu untuk dikunjungi, aktif dan arahkan jika diperlukan.

Ajowi

14

Anda merindukan text-decoration:noneuntuk tag anchor . Jadi kode harus mengikuti.

.boxhead a {
    text-decoration: none;
}

<div class="boxhead">
    <h2>
        <span class="thisPage">Current Page</span>
        <a href="myLink"><span class="otherPage">Different Page</span></a>
    </h2>
</div>

Luaskan cuplikan

Lebih banyak properti standar untuk dekorasi teks

Santosh Khalse
sumber

9

Tanpa melihat halaman, sulit berspekulasi.

Tapi bagi saya sepertinya Anda border-bottom: 1px solid blue;sedang melamar. Mungkin menambahkan border: none;. text-decoration: none !importantbenar, mungkin saja Anda memiliki gaya lain yang masih mengesampingkan CSS itu.

Di sinilah menggunakan Toolbar Pengembang Web Firefox luar biasa, Anda dapat mengedit CSS di sana dan melihat apakah semuanya berfungsi, setidaknya untuk Firefox. Di bawah CSS > Edit CSS.

artlung
sumber

9

Sebagai aturan, jika "garis bawah" Anda tidak berwarna sama dengan teks Anda [dan 'warna:' tidak diganti inline] itu tidak berasal dari "dekorasi teks:" Itu harus "batas bawah:"

Jangan lupa untuk mengambil perbatasan dari kelas pseudo Anda juga!

a, a:link, a:visited, a:active, a:hover {border:0!important;}

Cuplikan ini mengasumsikan pada jangkar, ganti ke bungkusnya sesuai ... dan gunakan spesifisitas alih-alih "! Penting" setelah Anda melacak akar penyebabnya.

Joel Crawford-Smith
sumber

4

Meskipun jawaban lain benar, ada cara mudah untuk menghilangkan garis bawah pada semua tautan sial itu:

a {
   text-decoration:none;
}

Ini akan menghapus garis bawah dari SETIAP LINK TUNGGAL di halaman Anda!

teknologi yarz
sumber

pastikan itu pada tag jangkar dan inline bisa lebih baik karena Anda mungkin ingin garis bawah pada tautan lain.

Asuquo12

2

Jika text-decoration: noneatau border: 0tidak berhasil, coba terapkan gaya sebaris di html Anda.

Deke
sumber

1

Cukup gunakan properti

border:0;

dan kamu dilindungi. Bekerja dengan sempurna untuk saya ketika properti dekorasi teks tidak bekerja sama sekali.

MK Sandhu
sumber

1

Tidak ada jawaban yang cocok untuk saya. Dalam kasus saya ada standar

a:-webkit-any-link {
text-decoration: underline;

dalam kode saya. Pada dasarnya apa pun tautannya, warna teks menjadi biru, dan tautan tetap apa pun itu.

Jadi saya menambahkan kode di akhir tajuk seperti ini:

<head>
  </style>
    a:-webkit-any-link {
      text-decoration: none;
    }
  </style>
</head>

dan masalahnya tidak ada lagi.

Neo
sumber

1

  a {
    color: unset;
    text-decoration: unset;
  }

itzhar
sumber

0

Berikut adalah contoh untuk kontrol LinkButton webforms asp.net:

 <asp:LinkButton ID="lbmmr1" runat="server" ForeColor="Blue" />

Kode di belakang:

 lbmmr1.Attributes.Add("style", "text-decoration: none;")

JoshYates1980
sumber

0

Anda tidak pernah menggunakan dekorasi teks di pemilih yang salah. Anda perlu memeriksa tag mana yang Anda butuhkan untuk dekorasi tidak ada.

Anda dapat menggunakan kode ini

.boxhead h2 a{text-decoration: none;}

ATAU

.boxhead a{text-decoration: none !important;}

ATAU

a{text-decoration: none !important;}

Md Abul Bashar
sumber

0

Letakkan kode HTML berikut sebelum <BODY>tag:

<STYLE>A {text-decoration: none;} </STYLE>

qarly_blue
sumber

0

Dalam kasus saya, HTML saya jelek. Tautan berada di dalam <u>tag, dan bukan <ul>tag.

mwilcox
sumber

0

Seperti yang ditunjukkan orang lain, sepertinya Anda tidak bisa menimpa gaya dekorasi teks bersarang ... TAPI Anda dapat mengubah warna dekorasi teks.

Sebagai peretasan, saya mengubah warna menjadi transparan:

teks-dekorasi-warna: transparan;

Ben
sumber

Hapus garis bawah yang membandel dari tautan

Jawaban: