Çalıştırılabilir CSS Dokümanları: Altı çizili yazı

Q: CSS'te metnin altı nasıl çizilir?

Elemente text-decoration: underline; ver. Çizginin görünümü için text-decoration-color, text-decoration-style, text-decoration-thickness ve text-underline-offset ekle.

Q: Bir linkten alt çizgi nasıl kaldırılır?

a elementine text-decoration: none; ver. Linklerin başka bir yolla hâlâ öne çıktığından emin ol (renk artı hover ya da odakta alt çizgi), çünkü birçok okuyucu linkleri alt çizgiden tanır.

Q: Alt çizgi rengi nasıl değiştirilir?

text-decoration-color ya da kısa yazımı kullan: text-decoration: underline #f59e0b;. O olmadan çizgi metin rengini kullanır.

Q: Metin ile alt çizgi arasına nasıl boşluk eklenir?

text-underline-offset kullan, örneğin text-underline-offset: 4px;. Daha büyük değerler çizgiyi metnin daha altına taşır.

CSS'te metnin altı nasıl çizilir

text-decoration: underline metnin altına bir çizgi çizer. Ona bir renk vermedikçe çizgi metin rengini alır.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 22px; color: #111827; }
    .under { text-decoration: underline; }
    .styled {
      text-decoration: underline wavy #f59e0b;
      text-decoration-thickness: 2px;
      text-underline-offset: 5px;
    }
  </style>
</head>
<body>
  <p class="under">A plain underline</p>
  <p class="styled">A wavy amber underline, 2px thick, 5px below</p>
</body>
</html>

İkinci satır çizgi türü, stili ve rengi için text-decoration kısa yazımını kullanıyor, sonra kalınlığı ve uzaklığı kendi özellikleriyle ayarlıyor. Belirtim kalınlığın kısa yazımın içinde olmasına da izin verir, ama onu eklediğinde Safari bildirimin tamamını atar, bu yüzden text-decoration-thickness'ı ayrı yaz.

text-decoration özellikleri

Özellik	Değerler	Varsayılan
`text-decoration-line`	`underline`, `overline`, `line-through`, `none` (birleştirilebilir)	`none`
`text-decoration-style`	`solid`, `double`, `dotted`, `dashed`, `wavy`	`solid`
`text-decoration-color`	Herhangi bir renk	`currentColor` (metin rengi)
`text-decoration-thickness`	Bir uzunluk, bir yüzde, `auto`, `from-font`	`auto`
`text-underline-offset`	Bir uzunluk, bir yüzde, `auto`	`auto`

text-decoration ilk dördünün kısa yazımıdır, ama kalınlığı onun dışında tut: Safari, kalınlık içeren bir text-decoration bildirimini yok sayar. text-underline-offset ayrıdır ve tek başına yazılmalıdır.

Stiller, renkler ve kalınlık

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline styles</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; color: #111827; }
    p { margin: 10px 0; text-decoration-line: underline; }
    .solid { text-decoration-style: solid; }
    .double { text-decoration-style: double; }
    .dotted { text-decoration-style: dotted; }
    .dashed { text-decoration-style: dashed; }
    .wavy { text-decoration-style: wavy; text-decoration-color: #dc2626; }
    .thick { text-decoration-thickness: 4px; text-decoration-color: #2563eb; }
  </style>
</head>
<body>
  <p class="solid">solid</p>
  <p class="double">double</p>
  <p class="dotted">dotted</p>
  <p class="dashed">dashed</p>
  <p class="wavy">wavy and red, like a spelling error</p>
  <p class="thick">4px thick and blue</p>
</body>
</html>

Alt çizgiyi taşımak: text-underline-offset

Varsayılan olarak çizgi harflere yakın durur ve g, p ve y gibi aşağı sarkan harflerin çevresinden atlar. text-underline-offset onu daha aşağı iter; bu çoğu zaman başlıklarda ve linklerde daha temiz okunur:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline offset</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 24px; color: #111827; }
    p { text-decoration: underline #2563eb; text-decoration-thickness: 2px; margin: 12px 0; }
    .o2 { text-underline-offset: 2px; }
    .o6 { text-underline-offset: 6px; }
    .o10 { text-underline-offset: 10px; }
  </style>
</head>
<body>
  <p>Typography (auto)</p>
  <p class="o2">Typography (2px)</p>
  <p class="o6">Typography (6px)</p>
  <p class="o10">Typography (10px)</p>
</body>
</html>

Aşağı sarkan harflerin çevresindeki boşluklar, varsayılan olarak açık olan text-decoration-skip-ink: auto'dan gelir. Kesintisiz bir çizgi için onu none yap.

Linklerden alt çizgiyi kaldırmak

Linklerin altı tarayıcının stil dosyası tarafından çizilir. text-decoration: none onu kaldırır. Birçok okuyucu linkleri alt çizgiden bulduğu için onu hover'da ve klavye odağında geri getir ve linke metinden farklı bir renk ver:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Link underlines</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; color: #111827; }
    nav a {
      color: #2563eb;
      text-decoration: none;
      margin-inline-end: 16px;
    }
    nav a:hover,
    nav a:focus-visible {
      text-decoration: underline;
      text-underline-offset: 4px;
    }
  </style>
</head>
<body>
  <nav>
    <a href="#home" id="first">Home</a>
    <a href="#docs">Docs</a>
    <a href="#blog">Blog</a>
  </nav>
  <p>Links in a paragraph, like <a href="#more">this one</a>, keep their underline.</p>
</body>
</html>

Gezinme çubukları ve butonlar alt çizgiyi kaldırmak için makul yerlerdir, çünkü konumları zaten "link" der. Bir metin paragrafının içinde onu koru. Link durumlarıyla ilgili daha fazlası hover sayfasında.

Üst çizgi ve üstü çizili yazı

text-decoration-line metnin üstüne ya da ortasından da bir çizgi çizer ve birden fazla değer kabul eder:

.old-price { text-decoration: line-through; }
.both      { text-decoration-line: underline overline; }

CSS ile üstü çizili yazı yalnızca görseldir. Metin silinmiş içerikse (değişen bir fiyat, kaldırılan bir öğe), HTML altı çizili yazı sayfasının gösterdiği gibi onu <s> ya da <del> ile işaretle; böylece anlam yalnızca stilde değil işaretlemede de olur.

Sık yapılan hatalar

Stil için <u> ile alt çizmek. <u>, yazım hataları gibi farklı olarak işaretlenen metin içindir. Stilli bir alt çizgi için CSS kullan.
Link olmayan metnin altını çizmek. Okuyucular ona tıklamaya çalışır. Vurgu için bunun yerine kalın yazı, renk ya da arka plan kullan.
Gövde metnindeki link alt çizgilerini başka bir ipucu olmadan kaldırmak. Farkı göremeyen okuyucular için yalnızca renk yeterli değildir.
Bir ebeveynin alt çizgisini çocuktan kaldırmaya çalışmak. İçeriden geri alınamaz; ebeveyni değiştir ya da çocuğu inline-block yap.
text-underline-offset'in kısa yazımda olmasını beklemek. Kendi başına bir özelliktir.
Kalınlığı kısa yazıma koymak. text-decoration: underline 2px Chrome ve Firefox'ta çalışır, ama Safari bildirimin tamamını atar. text-decoration-thickness kullan.

Sıkça Sorulan Sorular

CSS'te metnin altı nasıl çizilir?

Elemente text-decoration: underline; ver. Çizginin görünümü için text-decoration-color, text-decoration-style, text-decoration-thickness ve text-underline-offset ekle.

Bir linkten alt çizgi nasıl kaldırılır?

a elementine text-decoration: none; ver. Linklerin başka bir yolla hâlâ öne çıktığından emin ol (renk artı hover ya da odakta alt çizgi), çünkü birçok okuyucu linkleri alt çizgiden tanır.

Alt çizgi rengi nasıl değiştirilir?

text-decoration-color ya da kısa yazımı kullan: text-decoration: underline #f59e0b;. O olmadan çizgi metin rengini kullanır.

Metin ile alt çizgi arasına nasıl boşluk eklenir?

text-underline-offset kullan, örneğin text-underline-offset: 4px;. Daha büyük değerler çizgiyi metnin daha altına taşır.

Bir çocuk elementten alt çizgiyi neden kaldıramıyorum?

Bir ebeveynin çizdiği alt çizgi çocuklarının üzerine boyanır ve onların içinden kaldırılamaz. Onu ayarlayan elementte kaldır ya da çocuğu display: inline-block yap; ebeveynin süslemesi ona ulaşmaz.

İlgili kavramlar