Bagaimana meningkatkan kesenjangan antara teks dan garis bawah pada CSS

306

Menggunakan CSS, ketika teks telah text-decoration:underlinediterapkan, apakah mungkin untuk meningkatkan jarak antara teks dan garis bawah?

css  underline 
— maks
sumber
1
Ini tidak persis apa yang Anda minta, tapi itu bacaan yang menarik tentang subjek: Desain CSS: Custom Underline
— Peter Rowell
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.
— chocolata
1
— w3spi
1
Pilih di text-underline-offsetsini: bugs.chromium.org/p/chromium/issues/…
— Mark Fisher

Jawaban:

356

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

— chelmertz
sumber
3
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:

a {
    text-decoration: none;
    position: relative;
}
a:after {
    content: '';

    width: 100%;
    position: absolute;
    left: 0;
    bottom: 1px;

    border-width: 0 0 1px;
    border-style: solid;
}

Dengan mengubah bottomproperti (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.

— anak terakhir
sumber
2
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

Lihat di sini untuk detail lebih lanjut: https://css-tricks.com/almanac/properties/t/text-underline-position/

Lihat juga kompatibilitas browser .

— Duc Huynh
sumber
2
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.
— Paras Shah
2
Itu tidak bekerja di Firefox, bahkan dengan awalan vendor - tetapi itu dalam spesifikasi W3C: w3.org/TR/css-text-decor-3/#text-underline-position-property . Sumber daya lain yang relevan: quackit.com/css/css3/properties/css_text-underline-position.cfm
— rosell.dk
4
Sampai saat ini, ini hanya benar-benar berfungsi di browser chrome, dan bukan solusi untuk browser lain.
— miir
2
Yah, pada tanggal komentar ini, saya melihat ini berfungsi di Firefox juga.
— Jarad
15

Inilah yang bekerja dengan baik untuk saya. 

<style type="text/css">
  #underline-gap {
    text-decoration: underline;
    text-underline-position: under;
  }
</style>
<body>
  <h1 id="underline-gap"><a href="https://Google.com">Google</a></h1>
</body>
Luaskan cuplikan

— Jordan Starrk
sumber
2
Penting untuk dicatat bahwa text-underline-positiontidak didukung di bawah Firefox seperti per developer.mozilla.org/en-US/docs/Web/CSS/…
— Floran Gmehlin
Sangat menarik. Info hebat. Terima kasih!
— Jordan Starrk
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%, 
        #222222 81.1%,
        #222222 85%,
        rgba(0,0,0,0) 85.1%,
        rgba(0,0,0,0)
    );
    text-decoration: none;
}
<a href="#">Lorem ipsum</a> dolor sit amet, <a href="#">consetetur sadipscing</a> elitr, sed diam nonumy eirmod tempor <a href="#">invidunt ut labore.</a>
Luaskan cuplikan

  • Sesuaikan% nilai (81% dan 85%) untuk mengubah seberapa jauh garis dari teks
  • Sesuaikan perbedaan antara nilai dua% untuk mengubah ketebalan garis
  • sesuaikan nilai warna (# 222222) untuk mengubah warna garis bawah
  • bekerja dengan beberapa elemen inline garis
  • bekerja dengan latar belakang apa pun

Berikut ini adalah versi dengan semua properti eksklusif untuk beberapa kompatibilitas:

a {     
    /* This code generated from: http://colorzilla.com/gradient-editor/ */
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 81%, rgba(0,0,0,1) 81.1%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 85.1%, rgba(0,0,0,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(81%,rgba(0,0,0,0)), color-stop(81.1%,rgba(0,0,0,1)), color-stop(85%,rgba(0,0,0,1)), color-stop(85.1%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* W3C */

    text-decoration: none;
}

Pembaruan: versi SASSY

Saya membuat mixin scss untuk ini. Jika Anda tidak menggunakan SASS, versi reguler di atas masih berfungsi dengan baik ...

@mixin fake-underline($color: #666, $top: 84%, $bottom: 90%) {
    background-image: linear-gradient(
        180deg, rgba(0,0,0,0),
        rgba(0,0,0,0) $top,
        $color $top + 0.1%,
        $color $bottom,
        rgba(0,0,0,0) $bottom + 0.1%,
        rgba(0,0,0,0)
    );
    text-decoration: none;
}

lalu gunakan seperti ini:

$blue = #0054a6;
a {
    color: $blue;
    @include fake-underline(lighten($blue,20%));
}
a.thick {
    color: $blue;
    @include fake-underline(lighten($blue,40%), 86%, 99%);
}

Pembaruan 2: Tip Descenders

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.

— squarecandy
sumber
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.

— Dominic P
sumber
1
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:

  1. ubah contentke sesuatu dengan panjang yang benar (yaitu sama

  2. text) atur warna font menjadi transparent(atau rgba(0,0,0,0))

untuk menggarisbawahi <h2>Processing</h2>(misalnya), ubah kode anak terakhir menjadi:

a {
    text-decoration: none;
    position: relative;
}
a:after {
    content: 'Processing';
    color: transparent;

    width: 100%;
    position: absolute;
    left: 0;
    bottom: 1px;

    border-width: 0 0 1px;
    border-style: solid;
}
— Michael Greisman
sumber
9
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.
— anak terakhir
3

Lihat biola saya .

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: 0px 0px 1px 0px;
  transition: all .2s ease-in;
}

a:hover{
  color:darkblue;
  border-style:solid;
  border-width: 0px 0px 1px 0px;
  padding:2px;
}
<a href='#' >Somewhere ... over the rainbow (lalala)</a> , blue birds, fly... (tweet tweet!), and I wonder (hmm) about what a <i><a href="#">what a wonder-ful world!</a> World!</i>
Luaskan cuplikan

— Stardust
sumber
2

Alternatif untuk teks atau tautan multiline, Anda bisa membungkus teks Anda dalam rentang di dalam elemen blok. 

<a href="#">
    <span>insert multiline texts here</span>
</a>

maka Anda bisa menambahkan border-bottom dan padding pada <span>.

a {
  width: 300px;
  display: block;
}

span {
  padding-bottom: 10px;
  border-bottom: 1px solid #0099d3;
  line-height: 48px;
}

Anda bisa merujuk biola ini. https://jsfiddle.net/Aishaterr/vrpb2ey7/2/

— Daniel Hernandez
sumber
2

Jika kamu mau:

  • multiline
  • burik
  • dengan padding bawah kustom
  • tanpa pembungkus

garis bawah, Anda dapat menggunakan gambar latar belakang setinggi 1 piksel dengan repeat-xdan 100% 100%posisi:

display: inline;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAYAAAD0In+KAAAAEUlEQVQIW2M0Lvz//2w/IyMAFJoEAis2CPEAAAAASUVORK5CYII=') repeat-x 100% 100%;

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:

padding-bottom: 5px;
background-position-y: calc(100% - 5px);

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

— mcmimik
sumber
1

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

— Ifrah
sumber
0

Saya dapat melakukannya menggunakan U (Tag Garis Bawah)

u {
    text-decoration: none;
    position: relative;
}
u:after {
    content: '';
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 1px;
    border-width: 0 0 1px;
    border-style: solid;
}


<a href="" style="text-decoration:none">
    <div style="text-align: right; color: Red;">
        <u> Shop Now</u>
    </div>
</a>
— Arun Prasad ES
sumber
0

Inilah yang saya gunakan:

html:

<h6><span class="horizontal-line">GET IN</span> TOUCH</h6>

css:

.horizontal-line { border-bottom: 2px solid  #FF0000; padding-bottom: 5px; }
— Constantinos Constantinou
sumber
0

Apa yang saya gunakan:

<span style="border-bottom: 1px solid black"> Enter text here </span>
— Francis Acosta
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.