Jarak ditentukan oleh font yang digunakan. Coba font yang aman untuk web.
Alexei Danchenkov
1
CSS3 memiliki banyak properti dekorasi teks baru hari ini. Silakan periksa contoh alligator.io/css/text-decoration: text-underline-position: under;dan text-decoration-skip: ink;Harap dicatat bahwa ini mungkin tidak kompatibel dengan browser lama.
Tidak, tetapi Anda bisa menggunakan sesuatu seperti border-bottom: 1px solid #000dan padding-bottom: 3px.
Jika Anda ingin warna yang sama dari "garis bawah" (yang dalam contoh saya adalah perbatasan), Anda cukup meninggalkan deklarasi warna, yaitu border-bottom-width: 1pxdan border-bottom-style: solid.
Untuk multiline, Anda bisa membungkus Anda teks multiline dalam rentang di dalam elemen. Misalnya, <a href="#"><span>insert multiline texts here</span></a>tambahkan saja border-bottomdan paddingpada <span>- Demo
Satu-satunya masalah saya dengan trik ini adalah ketika saya menggunakan tinggi-line sama dengan tinggi div dan kemudian vertikal-align: middle; untuk membuatnya terpusat, maka saya tidak dapat menggunakan trik ini karena kemudian garis bawahnya berakhir di bawah div.
deweydb
@deweydb: Bagaimana kalau menambahkan padding-bottom ke div kontainer juga? jsfiddle.net/dYfjc/1
chelmertz
+1 Saya tidak tahu tentang meninggalkan properti warna untuk mewarisi warna font - yang akan menghemat banyak keringat dan air mata di masa depan!
Larry
9
Saya tidak yakin mengapa jawaban ini memiliki begitu banyak upvotes. Ini tidak sepenuhnya berfungsi dengan teks multiline.
3
Untuk multiline, Anda bisa membungkus Anda teks multiline dalam rentang di dalam elemen. Misalnya, <a href="#"><span>insert multiline texts here</span></a>tambahkan saja border-bottom dan padding pada <span>. jsfiddle.net/Aishaterr/vrpb2ey7/1
Daniel Hernandez
133
Pembaruan 2019: Kelompok Kerja CSS telah menerbitkan konsep untuk dekorasi teks level 4 yang akan menambah properti baru text-underline-offset(serta text-decoration-thickness) untuk memungkinkan kontrol atas penempatan yang tepat dari sebuah garis bawah. Pada tulisan ini, ini adalah konsep tahap awal dan belum diterapkan oleh browser apa pun, tetapi sepertinya itu akan membuat teknik di bawah ini menjadi usang.
Jawaban asli di bawah ini.
Masalah dengan menggunakan border-bottomlangsung adalah bahwa bahkan dengan padding-bottom: 0, garis bawah yang cenderung terlalu jauh jauh dari teks ke tampilan yang baik. Jadi kita masih belum memiliki kendali penuh.
Salah satu solusi yang memberi Anda akurasi piksel adalah dengan menggunakan :afterelemen pseudo:
Ini tidak akan berfungsi untuk masalah khusus saya, tetapi ini adalah trik yang fantastis. +1
11
Kerja bagus, tapi ini tidak akan berfungsi untuk jangkar yang menjangkau beberapa baris
Willster
@ last-child Yang ini lebih baik daripada menggarisbawahi, tetapi dengan pembungkusan teks ini tidak akan berfungsi untuk setiap baris
Nishantha
Satu masalah adalah bahwa batas-bawah dan garis bawah adalah dua hal yang berbeda. Sebagai contoh, jika bagian dari teks diperluas di bawah garis bawah. Jika Anda mendesain a-tag sebagai tombol, Anda tidak memiliki kebebasan menggunakan border-bottom sebagai garis bawah.
Anders Lindén
10
Bayangkan memberi tahu seseorang yang baru mengenal pengembangan web, desainer grafis, rata-rata pengguna, atau ibu Anda, bahwa ini adalah apa yang diperlukan untuk menambahkan beberapa ruang terkontrol antara teks dan garis bawahnya dan mereka akan bertanya-tanya apa yang Anda lakukan dengan hidup Anda .
MarcGuay
79
Anda bisa menggunakan ini text-underline-position: under
Terima kasih! Jika Anda mencoba untuk menggarisbawahi garis putus-putus dan melihat bahwa itu digambar tanpa ruang antara bagian bawah teks dan garis, maka ini memperbaiki masalah.
Jonathan Cross
6
Ini adalah jawaban yang tepat untuk peramban modern tanpa solusi apa pun.
Didukung di Firefox mulai dari 74, sesuai tautan yang sama.
GSerg
11
Masuk ke detail gaya visual text-decoration:underlinecukup banyak sia-sia, jadi Anda harus pergi dengan beberapa jenis hack yang dihapus text-decoration:underlinedan menggantinya dengan sesuatu yang lain sampai versi CSS jauh masa depan yang ajaib jauh dari CSS memberi kita lebih banyak kontrol .
Ini bekerja untuk saya:
a {background-image: linear-gradient(180deg, rgba(0,0,0,0),
rgba(0,0,0,0)81%,#22222281.1%,#22222285%,
rgba(0,0,0,0)85.1%,
rgba(0,0,0,0));text-decoration: none;}
<ahref="#">Lorem ipsum</a> dolor sit amet, <ahref="#">consetetur sadipscing</a> elitr, sed diam nonumy eirmod tempor <ahref="#">invidunt ut labore.</a>
Jika Anda memiliki warna latar belakang yang solid, coba tambahkan warna tipis text-strokeatau text-shadowdengan warna yang sama dengan latar belakang Anda untuk membuat keturunan terlihat bagus.
Kredit
Ini adalah versi sederhana dari teknik yang awalnya saya temukan di https://eager.io/app/smartunderline , tetapi sejak itu artikel tersebut telah dihapus.
Sayangnya tautan eager.io tidak berfungsi lagi. Apakah Anda ingat retas apa yang membuat keturunan terlihat lebih baik?
kano
1
@ Kano - Saya percaya itu menggunakan text-shadow dengan warna yang sama dengan latar belakang yang solid.
squarecandy
Juga, dengan teknik di atas Anda dapat mengatur warna garis bawah berbeda dari teks, jadi kadang-kadang saya mengaturnya menjadi lebih terang dari teks, yang membuat tabrakan dengan keturunan lebih sedikit masalah untuk keterbacaan.
squarecandy
7
Saya tahu ini adalah pertanyaan lama, tetapi untuk pengaturan teks baris tunggal display: inline-blockdan kemudian pengaturan heighttelah bekerja dengan baik bagi saya untuk mengontrol jarak antara perbatasan dan teks.
Saya tidak perlu mengatur ketinggian. Saya hanya membungkusnya dengan div lain dan karena saya ingin itu terpusat saya hanya mengatur text-align pada out div.
Guy Lowe
6
@ jawaban anak terakhir adalah jawaban yang bagus!
Namun, menambahkan perbatasan ke H2 saya menghasilkan garis bawah lebih panjang dari teks.
Jika Anda secara dinamis menulis CSS Anda, atau jika seperti saya Anda beruntung dan tahu teksnya, Anda dapat melakukan hal berikut:
ubah contentke sesuatu dengan panjang yang benar (yaitu sama
text) atur warna font menjadi transparent(atau rgba(0,0,0,0))
untuk menggarisbawahi <h2>Processing</h2>(misalnya), ubah kode anak terakhir menjadi:
H2s adalah elemen blok yang mungkin menjelaskan mengapa garis bawah lebih panjang dari teks. Mungkin display: inline-blockakan memperbaikinya. Mengganti teks dengan contenttampak seperti retasan yang dapat merusak banyak cara.
Anda perlu menggunakan properti lebar perbatasan dan properti padding. Saya menambahkan beberapa animasi agar terlihat lebih keren:
body{background-color:lightgreen;}
a{text-decoration:none;color:green;border-style:solid;border-width:0px0px1px0px;transition: all .2s ease-in;}a:hover{color:darkblue;border-style:solid;border-width:0px0px1px0px;padding:2px;}
<ahref='#'>Somewhere ... over the rainbow (lalala)</a> , blue birds, fly... (tweet tweet!), and I wonder (hmm) about what a <i><ahref="#">what a wonder-ful world!</a> World!</i>
Anda dapat mengganti yang kedua 100%dengan sesuatu yang lain seperti pxatau emuntuk menyesuaikan posisi vertikal garis bawah. Anda juga dapat menggunakan calcjika Anda ingin menambahkan lapisan vertikal, misalnya:
Tentu saja Anda juga dapat membuat pola png base64 Anda sendiri dengan warna, tinggi, dan desain lain, misalnya di sini: http://www.patternify.com/ - cukup setel lebar & tinggi persegi di 2x1.
Jika Anda menggunakan text-decoration: underline;, maka Anda dapat menambahkan ruang antara garis bawah dan teks dengan menggunakantext-underline-position: under;
Untuk lebih lanjut Properti posisi-teks-garis bawah, Anda dapat melihat di sini
text-underline-position: under;
dantext-decoration-skip: ink;
Harap dicatat bahwa ini mungkin tidak kompatibel dengan browser lama.text-underline-offset
sini: bugs.chromium.org/p/chromium/issues/…Jawaban:
Tidak, tetapi Anda bisa menggunakan sesuatu seperti
border-bottom: 1px solid #000
danpadding-bottom: 3px
.Jika Anda ingin warna yang sama dari "garis bawah" (yang dalam contoh saya adalah perbatasan), Anda cukup meninggalkan deklarasi warna, yaitu
border-bottom-width: 1px
danborder-bottom-style: solid
.Untuk multiline, Anda bisa membungkus Anda teks multiline dalam rentang di dalam elemen. Misalnya,
<a href="#"><span>insert multiline texts here</span></a>
tambahkan sajaborder-bottom
danpadding
pada<span>
- Demosumber
<a href="#"><span>insert multiline texts here</span></a>
tambahkan saja border-bottom dan padding pada<span>
. jsfiddle.net/Aishaterr/vrpb2ey7/1Pembaruan 2019: Kelompok Kerja CSS telah menerbitkan konsep untuk dekorasi teks level 4 yang akan menambah properti baru
text-underline-offset
(sertatext-decoration-thickness
) untuk memungkinkan kontrol atas penempatan yang tepat dari sebuah garis bawah. Pada tulisan ini, ini adalah konsep tahap awal dan belum diterapkan oleh browser apa pun, tetapi sepertinya itu akan membuat teknik di bawah ini menjadi usang.Jawaban asli di bawah ini.
Masalah dengan menggunakan
border-bottom
langsung adalah bahwa bahkan denganpadding-bottom: 0
, garis bawah yang cenderung terlalu jauh jauh dari teks ke tampilan yang baik. Jadi kita masih belum memiliki kendali penuh.Salah satu solusi yang memberi Anda akurasi piksel adalah dengan menggunakan
:after
elemen pseudo:Dengan mengubah
bottom
properti (angka negatif baik-baik saja) Anda dapat memposisikan garis bawah tepat di tempat yang Anda inginkan.Satu masalah dengan teknik ini untuk berhati-hati adalah bahwa itu berperilaku agak aneh dengan garis membungkus.
sumber
Anda bisa menggunakan ini
text-underline-position: under
Lihat di sini untuk detail lebih lanjut: https://css-tricks.com/almanac/properties/t/text-underline-position/
Lihat juga kompatibilitas browser .
sumber
Inilah yang bekerja dengan baik untuk saya.
sumber
text-underline-position
tidak didukung di bawah Firefox seperti per developer.mozilla.org/en-US/docs/Web/CSS/…Masuk ke detail gaya visual
text-decoration:underline
cukup banyak sia-sia, jadi Anda harus pergi dengan beberapa jenis hack yang dihapustext-decoration:underline
dan menggantinya dengan sesuatu yang lain sampai versi CSS jauh masa depan yang ajaib jauh dari CSS memberi kita lebih banyak kontrol .Ini bekerja untuk saya:
Berikut ini adalah versi dengan semua properti eksklusif untuk beberapa kompatibilitas:
Pembaruan: versi SASSY
Saya membuat mixin scss untuk ini. Jika Anda tidak menggunakan SASS, versi reguler di atas masih berfungsi dengan baik ...
lalu gunakan seperti ini:
Pembaruan 2: Tip Descenders
Jika Anda memiliki warna latar belakang yang solid, coba tambahkan warna tipis
text-stroke
atautext-shadow
dengan warna yang sama dengan latar belakang Anda untuk membuat keturunan terlihat bagus.Kredit
Ini adalah versi sederhana dari teknik yang awalnya saya temukan di https://eager.io/app/smartunderline , tetapi sejak itu artikel tersebut telah dihapus.
sumber
Saya tahu ini adalah pertanyaan lama, tetapi untuk pengaturan teks baris tunggal
display: inline-block
dan kemudian pengaturanheight
telah bekerja dengan baik bagi saya untuk mengontrol jarak antara perbatasan dan teks.sumber
@ jawaban anak terakhir adalah jawaban yang bagus!
Namun, menambahkan perbatasan ke H2 saya menghasilkan garis bawah lebih panjang dari teks.
Jika Anda secara dinamis menulis CSS Anda, atau jika seperti saya Anda beruntung dan tahu teksnya, Anda dapat melakukan hal berikut:
ubah
content
ke sesuatu dengan panjang yang benar (yaitu samatext) atur warna font menjadi
transparent
(ataurgba(0,0,0,0)
)untuk menggarisbawahi
<h2>Processing</h2>
(misalnya), ubah kode anak terakhir menjadi:sumber
display: inline-block
akan memperbaikinya. Mengganti teks dengancontent
tampak seperti retasan yang dapat merusak banyak cara.Lihat biola saya .
Anda perlu menggunakan properti lebar perbatasan dan properti padding. Saya menambahkan beberapa animasi agar terlihat lebih keren:
sumber
Alternatif untuk teks atau tautan multiline, Anda bisa membungkus teks Anda dalam rentang di dalam elemen blok.
maka Anda bisa menambahkan border-bottom dan padding pada
<span>
.Anda bisa merujuk biola ini. https://jsfiddle.net/Aishaterr/vrpb2ey7/2/
sumber
Jika kamu mau:
garis bawah, Anda dapat menggunakan gambar latar belakang setinggi 1 piksel dengan
repeat-x
dan100% 100%
posisi:Anda dapat mengganti yang kedua
100%
dengan sesuatu yang lain sepertipx
atauem
untuk menyesuaikan posisi vertikal garis bawah. Anda juga dapat menggunakancalc
jika Anda ingin menambahkan lapisan vertikal, misalnya:Tentu saja Anda juga dapat membuat pola png base64 Anda sendiri dengan warna, tinggi, dan desain lain, misalnya di sini: http://www.patternify.com/ - cukup setel lebar & tinggi persegi di 2x1.
Sumber inspirasi: http://alistapart.com/article/customunderlines
sumber
Jika Anda menggunakan
text-decoration: underline;
, maka Anda dapat menambahkan ruang antara garis bawah dan teks dengan menggunakantext-underline-position: under;
Untuk lebih lanjut Properti posisi-teks-garis bawah, Anda dapat melihat di sini
sumber
Saya dapat melakukannya menggunakan U (Tag Garis Bawah)
sumber
Inilah yang saya gunakan:
html:
css:
sumber
Apa yang saya gunakan:
sumber