Bagaimana cara menghapus garis bawah dari a: before?

95

Saya memiliki satu set tautan bergaya menggunakan :beforeuntuk menerapkan panah.

Ini terlihat bagus di semua browser, tetapi ketika saya menerapkan garis bawah ke tautan, saya tidak ingin ada garis bawah pada :beforebagian (panah).

Lihat jsfiddle misalnya: http://jsfiddle.net/r42e5/1/

Apakah mungkin untuk menghapus ini? Gaya uji coba yang saya ikuti #test p a:hover:beforememang diterapkan (menurut Firebug), tetapi garis bawahnya masih ada.

Adakah cara untuk menghindari ini?

#test {
  color: #B2B2B2;
}

#test p a {
  color: #B2B2B2;
  text-decoration: none;
}

#test p a:hover {
  text-decoration: underline;
}

#test p a:before {
  color: #B2B2B2;
  content: "► ";
  text-decoration: none;
}

#test p a:hover:before {
  text-decoration: none;
}
<div id="test">
  <p><a href="#">A link</a></p>
  <p><a href="#">Another link</a></p>
</div>
Luaskan cuplikan

html css hyperlink pseudo-element text-decorations OptimusCrime
sumber
Nah, Anda jelas menginginkan daftar ... Gunakan elemen UL, bukan kombinasi DIV / P. Dengan daftar Anda mendapatkan peluru (atau cakram, ...) gratis ...
Šime Vidas
Mengapa tidak menggunakan daftar dengan peluru khusus alih-alih paragraf dalam kasus Anda? Jika tidak, terapkan before-content ke p induk, bukan untuk menautkan sendiri.
YuS
Kemungkinan duplikat stackoverflow.com/questions/8536015/…
Oriol

Jawaban:

171

Apakah mungkin untuk menghapus ini?

Ya, jika Anda mengubah gaya tampilan elemen sebaris dari display:inline(default) menjadi display:inline-block:

#test p a:before {
    color: #B2B2B2;
    content: "► ";
    display:inline-block;
}

Ini karena spesifikasi CSS mengatakan :

Ketika ditentukan atau disebarkan ke elemen sebaris, itu mempengaruhi semua kotak yang dihasilkan oleh elemen itu, dan selanjutnya disebarkan ke kotak tingkat blok aliran apa pun yang memisahkan sebaris (lihat bagian 9.2.1.1). […] Untuk semua elemen lainnya, ini disebarkan ke turunan aliran apa pun. Perhatikan bahwa dekorasi teks tidak disebarkan ke keturunan mengambang dan benar-benar diposisikan, juga tidak ke konten keturunan tingkat sebaris atom seperti blok sebaris dan tabel sebaris .

(Penekanan milikku.)

Demo: http://jsfiddle.net/r42e5/10/

Terima kasih kepada @Oriol karena telah memberikan solusi yang mendorong saya untuk memeriksa spesifikasi dan memastikan bahwa solusi tersebut legal.

Phrogz
sumber
2
Anda dapat mengganti yang text-decoration:underlinediterapkan ke elemen induk dengan display:inline-block. Lihat contoh: jsfiddle.net/aZdhN/1 . Kemudian, masalah penanya dapat diselesaikan seperti ini: stackoverflow.com/a/17347068/1529630
Oriol
3
Sejauh yang saya lihat, ini tidak berfungsi di Internet Explorer (diuji 8-10). Ada ide bagaimana menangani IE?
Linus Caldwell
Saya telah menemukan solusi yang berfungsi di IE8-11 juga: stackoverflow.com/a/21902566/1607968
LeJared
53

Ada Bug di IE8-11 , jadi menggunakan display:inline-block;saja tidak akan berfungsi di sana.

Saya telah menemukan solusi untuk bug ini, dengan menyetel secara eksplisit text-decoration:underline;untuk: before-content dan kemudian menimpa aturan ini lagi dengantext-decoration:none;

a {text-decoration:none;}
a:hover {text-decoration:underline;}
a:before {content:'>\a0'; text-decoration:underline; display:inline-block;}
a:before,
a:hover:before {text-decoration:none;}

Contoh kerja di sini: http://jsfiddle.net/95C2M/

Pembaruan: Karena jsfiddle tidak lagi berfungsi dengan IE8, cukup tempelkan kode demo sederhana ini di file html lokal dan buka di IE8:

<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <style type="text/css">
        a {text-decoration:none;}
        a:hover {text-decoration:underline;}
        a:before {content:'>\a0'; text-decoration:underline; display:inline-block;}
        a:before,
        a:hover:before {text-decoration:none;}
    </style>
</head>
<body>
    <a href="#">Testlink</a> With no Underline on hover under before-content
</body>
</html>
LeJared
sumber
Seandainya IE8 menggarisbawahi gambar hyperlink yang hanya bisa dimatikan di <img style="text-decoration:underline">dalam (dan inilah kuncinya)<a style="padding:0; border:none;">
Bob Stein
Sayangnya, jsfiddle tidak dapat diverifikasi di IE8 karena jsfiddle tidak berfungsi di IE8.
pengguna2867288
Sayangnya saya tidak dapat menemukan alat berbagi kode online yang masih berfungsi dengan IE8. Saya telah menambahkan kode yang dipotong ke jawaban di atas yang dapat Anda tempelkan ke file html dan membukanya secara lokal di IE8.
LeJared
Diuji dan disetujui di IE9, acara tanpa dua status berbeda.
saeraphin
Memiliki tautan dengan ikon dalam: sebelumnya yang seharusnya TIDAK digarisbawahi dalam keadaan istirahat, kemudian digarisbawahi pada hover, tetapi bukan ikonnya. Inilah yang harus saya lakukan untuk meyakinkan IE agar melakukan ini dengan benar: a {text-decoration: none} a: before {text-decoration: underline} a: before {text-decoration: none} (yes really, first underline, lalu timpa dengan tidak ada) a: hover {text-decration: underline} a: hover: before {text-decoration: none}
Fake Haak
7

Anda dapat melakukannya dengan menambahkan yang berikut ke :beforeelemen:

display: inline-block;
white-space: pre-wrap;

Dengan display: inline-blockgaris bawah menghilang. Tapi kemudian masalahnya adalah bahwa ruang setelah segitiga itu runtuh dan tidak ditampilkan. Untuk memperbaikinya, Anda dapat menggunakan white-space: pre-wrapatau white-space: pre.

Demo : http://jsfiddle.net/r42e5/9/

Oriol
sumber
1
1 untuk pre-wrappetunjuknya. Saya menggunakan content:'►\a0'(\ a0 = & nbsp;)
Hashbrown
1

Bungkus tautan Anda dalam bentang dan tambahkan dekorasi teks ke bentang di a: hover seperti ini, 

a:hover span {
   text-decoration:underline;
}

Saya telah memperbarui biola Anda dengan apa yang menurut saya sedang Anda coba lakukan. http://jsfiddle.net/r42e5/4/

Ambing
sumber
Ide bagus. Begitulah cara saya melakukannya sebelumnya. Masalahnya adalah bahwa tautan ini dibuat dalam sistem cms dan pelanggan kami mengisinya sebagai teks kaya sendiri.
OptimusCrime
bahasa apa CMS itu? Bisakah itu memuntahkan tautan dan kemudian membungkusnya dalam rentang sebelum mengirimkannya ke browser?
Udders
Perusahaan menggunakan modx. Saya kira saya bisa melakukan itu sebagai jalan keluar terakhir, tetapi saya benar-benar ingin membatalkannya. Kira itu tidak mungkin. Terima kasih.
OptimusCrime
-1

coba gunakan sebagai gantinya:

#test p:before {
    color: #B2B2B2;
    content: "► ";
    text-decoration: none;
}

akankah itu berhasil?

Elen
sumber
Saya memiliki paragraf may di div saya, jadi itu tidak akan berhasil. Ide bagus.
OptimusCrime
menarik yang menempatkan -1 jika jawaban yang diterima menunjukkan hal yang sama tetapi dalam bentuk yang berbeda ...
Elen
-4

Gunakan ini 

#test  p:before {
    color: #B2B2B2;
    content: "► ";

}
Bipin Chandra Tripathi
sumber
tidak melakukan apa apa. dekorasi teks diabaikan.
OptimusCrime