CSS'de metin ve alt çizgi arasındaki boşluk nasıl artırılır

306

Metin text-decoration:underlineuygulandığında CSS kullanmak , metin ile alt çizgi arasındaki mesafeyi artırmak mümkün mü?

css  underline 
— maxp
kaynak
1
Bu tam olarak istediğin şey değildi, ancak konu hakkında ilginç bir okuma oldu: CSS Tasarım: Özel Alt Çizgiler
— Peter Rowell
Mesafe kullanılan yazı tipiyle belirlenir. Web uyumlu yazı tiplerini deneyin.
— Alexei Danchenkov
1
CSS3, bugünlerde birçok yeni metin dekorasyon özelliğine sahiptir. Lütfen alligator.io/css/text-decoration adresine göz atın Örnek: text-underline-position: under;ve text-decoration-skip: ink;bunun muhtemelen eski tarayıcılarla geriye dönük uyumlu olmadığını lütfen unutmayın.
— chocolata
1
Başka bir iyi çözüm
— w3spi
1
text-underline-offsetBuraya oy verin : bugs.chromium.org/p/chromium/issues/…
— Mark Fisher

Yanıtlar:

356

Hayır, ama böyle bir şey ile gidebiliriz border-bottom: 1px solid #000ve padding-bottom: 3px.

"Alt çizginin" aynı rengini (örneğimde bir kenarlıktır) istiyorsanız, renk bildirimini dışarıda bırakırsınız, yani border-bottom-width: 1pxveborder-bottom-style: solid .

Çok satırlı olarak, çok satırlı metinleri öğenin içindeki bir açıklığa sarabilirsiniz. Örneğin <a href="#"><span>insert multiline texts here</span></a>sonra sadece eklemek border-bottomve paddingüzerinde <span>- Demo

— chelmertz
kaynak
3
Bu hile ile ilgili tek sorunum div yüksekliği eşit satır yüksekliği ve sonra dikey hizalama: orta; ortalamak için, o zaman bu hileyi kullanamıyorum çünkü o zaman alt çizgi div altında sona erer.
— deweydb
@deweydb: Dolgu tabanını konteyner divine de eklemeye ne dersiniz? jsfiddle.net/dYfjc/1
— chelmertz
+1 Yazı tipinin rengini devralmak için renk özelliğini bırakmayı bilmiyordum - gelecekte çok fazla ter ve gözyaşı kurtaracak!
— Larry
9
Bu cevabın neden bu kadar çok oy verdiğinden emin değilim. Bu çok satırlı metinlerle tamamen çalışmaz.
3
Çok satırlı olarak, çok satırlı metinleri öğenin içindeki bir açıklığa sarabilirsiniz. Örneğin <a href="#"><span>insert multiline texts here</span></a>sonra sadece sınır-alt ve dolgu ekleyin <span>. jsfiddle.net/Aishaterr/vrpb2ey7/1
— Daniel Hernandez
133

Güncelleme 2019: CSS Çalışma Grubu, metin dekorasyon seviyesi 4 için yeni bir mülk ekleyecek bir taslak yayınladı text-underline-offset(ayrıcatext-decoration-thickness altı çizgisinin tam yerleşimi üzerinde kontrol sağlamak için ) . Bu yazı itibariyle, erken aşamada bir taslak ve herhangi bir tarayıcı tarafından uygulanmadı, ancak sonunda tekniği eski haline getirecek gibi görünüyor.

Orijinal cevap aşağıda.

Kullanarak sorun border-bottomdoğrudan bile olmasıdır padding-bottom: 0, alt çizgi çok uzakta olma eğilimindedir uzağa bakmak yararına metinden. Yani hâlâ tam bir kontrolümüz yok.

Size piksel doğruluğu sağlayan bir çözüm, :aftersözde öğeyi kullanmaktır :

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;
}

Değiştirerek bottomÖzelliği (negatif sayılar iyidir) alt çizgiyi tam olarak istediğiniz yere konumlandırabilirsiniz.

Bu tekniğin dikkat etmesi gereken bir problem, çizgi sargıları ile biraz garip davranmasıdır.

— son çocuk
kaynak
2
Bu benim özel sorunum için işe yaramaz, ama bu harika bir numara. +1
11
Etrafında iyi işler var, ancak bu birden fazla çizgiye sahip çapalar için işe yaramayacak
— Willster
@ last-child Bu, altını çizmekten daha iyidir, ancak metin sarma ile bu her satır için işe yaramaz
— Nishantha
Bir sorun, bir kenar-alt ve alt çizginin iki farklı şey olmasıdır. Örneğin, metnin bir kısmı alt çizginin altına uzanmalıdır. A-etiketlerini düğme olarak biçimlendirirseniz, kenarın altını alt çizgi olarak kullanma özgürlüğünüz olmaz.
— Anders Lindén
10
Web geliştirmede yeni olan birine, grafik tasarımcıya, ortalama bir kullanıcıya veya annenize, metin ile altının arasına kontrollü bir alan eklemek için gereken şeyin bu olduğunu ve hayatınızla ne yaptığınızı merak edeceklerini söylediğinizi düşünün. .
— MarcGuay
79

Bunu kullanabilirsiniz text-underline-position: under

Daha fazla ayrıntı için buraya bakın: https://css-tricks.com/almanac/properties/t/text-underline-position/

Ayrıca bkz . Tarayıcı uyumluluğu .

— Duc Huynh
kaynak
2
Teşekkürler! Kesikli bir alt çizgi yapmaya ve metnin alt kısmı ile çizgi arasında boşluk olmadan çizildiğini görmeye çalışıyorsanız, bu sorunu çözer.
— Jonathan Cross
6
Bu, herhangi bir çözümü olmayan modern tarayıcılar için doğru cevaptır.
— Paras Shah
2
Firefox'ta, satıcı öneki ile bile çalışmaz - ancak bir W3C spesifikasyonundadır: w3.org/TR/css-text-decor-3/#text-underline-position-property . Diğer ilgili kaynak: quackit.com/css/css3/properties/css_text-underline-position.cfm
— rosell.dk
4
Bu andan itibaren, bu yalnızca krom tarayıcıda gerçekten işe yarıyor ve diğer tarayıcılar için bir çözüm değil.
— miir
2
Bu yorumun tarihi itibariyle, bunun Firefox'ta da çalıştığını görüyorum .
— Jarad
15

İşte benim için iyi olan şey. 

<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>
Snippet'i genişlet

— Ürdün Starrk
kaynak
2
text-underline-positionFirefox altında geliştiriciye göre
— Mozilla.org/en-US/docs/Web/CSS/…
Çok ilginç. Büyük ek bilgi. Teşekkür ederim!
— Jordan Starrk
Aynı bağlantıya göre 74'ten başlayarak Firefox'ta desteklenir.
— GSerg
11

Görsel stilinin ayrıntılarına girmek text-decoration:underlineneredeyse nafile, bu yüzden kaldırımları kesmek ve text-decoration:underlineCSS'nin büyülü uzak gelecekteki bir sürümü bize daha fazla kontrol verene kadar başka bir şeyle değiştirmek zorunda kalacaksınız. .

Bu benim için çalıştı:

   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>
Snippet'i genişlet

  • Satırın metinden ne kadar uzakta olduğunu değiştirmek için% değerlerini (% 81 ve% 85) ayarlayın
  • Çizgi kalınlığını değiştirmek için% iki değer arasındaki farkı ayarlayın
  • altı çizili rengi değiştirmek için renk değerlerini (# 222222) ayarlama
  • birden çok satır içi satır öğesiyle çalışır
  • herhangi bir arka planla çalışır

Bazı geriye dönük uyumluluk için tüm tescilli özelliklere sahip bir sürüm:

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;
}

Güncelleme: SASSY sürümü

Bunun için bir scss karışımı yaptım. SASS kullanmıyorsanız, yukarıdaki normal sürüm hala harika çalışıyor ...

@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;
}

sonra şöyle kullanın:

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

Güncelleme 2: Azalan İpucu

Düz bir arka plan renginiz varsa, alt öğelerin güzel görünmesi için arka planınızla aynı text-strokeveya ince bir renk eklemeyi deneyin text-shadow.

Kredi

Bu, aslında https://eager.io/app/smartunderline adresinde bulduğum tekniğin basitleştirilmiş bir sürümüdür , ancak makale o zamandan beri kaldırılmıştır.

— squarecandy
kaynak
Ne yazık ki eager.io bağlantısı artık çalışmıyor. İnişlerin daha güzel görünmesini sağlamak için hack'in ne olduğunu hatırlıyor musunuz?
— kano
1
@Kano - Metin gölgesini sağlam bir arka planla aynı renkte kullandığına inanıyorum.
— squarecandy
Ayrıca, yukarıdaki teknikle alt çizginin rengini metinden farklı olarak ayarlayabilirsiniz, bu nedenle bazen metinden daha açık olacak şekilde ayarladım, bu da inişlerle çarpışmaları okunabilirlik için daha az sorun haline getirir.
— squarecandy
7

Eski bir soru olduğunu biliyorum, ama tek satır metin ayarı display: inline-blockve sonra ayarı için heightbir kenarlık ve metin arasındaki mesafeyi kontrol etmek benim için iyi çalıştı.

— Dominic P
kaynak
1
Yüksekliği ayarlamam gerekmiyordu. Ben sadece başka bir div içine sarılmış ve ortalanmış olmasını istediğim gibi sadece dışarı div div metin hizalama ayarlayın.
— Guy Lowe
6

@ son çocuğun cevabı harika bir cevap!

Ancak, H2'ye bir kenarlık eklemek metinden daha uzun bir alt çizgi oluşturdu.

CSS'nizi dinamik olarak yazıyorsanız veya benim gibi şanslıysanız ve metnin ne olacağını biliyorsanız, aşağıdakileri yapabilirsiniz:

  1. contentdoğru uzunlukta bir şeye değiştirmek (yani aynı

  2. metin) yazı tipi rengini transparent(veya rgba(0,0,0,0)) olarak ayarlayın

altı çizili olarak <h2>Processing</h2>(örneğin), son çocuğun kodunu şu şekilde değiştirin:

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
kaynak
9
H2'ler, alt çizginin neden metinden daha uzun olduğunu açıklayabilen blok öğeleridir. Belki display: inline-blockdüzeltir. Metni değiştirmek, contentbirçok yönden kırılabilecek bir saldırıya benziyor.
— son çocuk
3

Kemanımı gör .

Border width özelliğini ve padding özelliğini kullanmanız gerekir. Daha havalı görünmesi için biraz animasyon ekledim:

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>
Snippet'i genişlet

— Stardust
kaynak
2

Çok satırlı metinler veya bağlantılar için bir alternatif olarak, metinlerinizi bir blok öğesinin içindeki bir açıklığa sarabilirsiniz. 

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

o zaman sadece kenarlık alt ve dolgu ekleyebilirsiniz <span> .

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

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

Bu kemandan bahsedebilirsiniz. https://jsfiddle.net/Aishaterr/vrpb2ey7/2/

— Daniel Hernandez
kaynak
2

Eğer istersen:

  • satırlı
  • noktalı
  • özel alt dolgu ile
  • ambalajsız

altı çizili olarak, 1 piksel yüksekliğinde arka plan resmini şu konumla repeat-xve 100% 100%konumla kullanabilirsiniz:

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

İkincisini , alt çizginin dikey konumunu ayarlamak veya 100%buna benzer başka bir şeyle değiştirebilirsiniz . Ayrıca dikey dolgu eklemek istiyorsanız da kullanabilirsiniz , örneğin:pxemcalc

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

Tabii ki başka bir renk, yükseklik ve tasarım ile kendi base64 png deseninizi de yapabilirsiniz, örneğin burada: http://www.patternify.com/ - sadece kare genişliğini ve yüksekliğini 2x1 olarak ayarlayın.

İlham kaynağı: http://alistapart.com/article/customunderlines

— mcmimik
kaynak
1

Kullanıyorsanız, kullanarak text-decoration: underline;alt çizgi ve metin arasına boşluk ekleyebilirsiniz.text-underline-position: under;

Daha fazla bilgi Metin altı çizili konum özellikleri için buraya bakabilirsiniz

— Ifrah
kaynak
0

Bunu U (Alt Çizgi Etiketi) kullanarak yapabildim

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
kaynak
0

Ne kullanıyorum:

html:

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

css:

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

Ne kullanıyorum:

<span style="border-bottom: 1px solid black"> Enter text here </span>
— Francis Acosta
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.