תיעוד CSS עם דוגמאות להרצה: קו תחתון

Q: איך מוסיפים קו תחתון לטקסט ב-CSS?

השתמשו ב-text-decoration: underline; על האלמנט. למראה של הקו, הוסיפו text-decoration-color, text-decoration-style, text-decoration-thickness ו-text-underline-offset.

Q: איך מסירים את הקו התחתון מקישור?

הגדירו text-decoration: none; על האלמנט a. ודאו שהקישורים עדיין בולטים בדרך אחרת (צבע ועוד קו תחתון ב-hover או בפוקוס), כי קוראים רבים מסתמכים על הקו התחתון כדי לזהות קישורים.

Q: איך משנים את צבע הקו התחתון?

השתמשו ב-text-decoration-color, או בקיצור: text-decoration: underline #f59e0b;. בלי זה, הקו משתמש בצבע הטקסט.

Q: איך מוסיפים מרווח בין הטקסט לקו התחתון?

השתמשו ב-text-underline-offset, למשל text-underline-offset: 4px;. ערכים גדולים יותר מרחיקים את הקו מתחת לטקסט.

CSS Underline: text-decoration, צבע, מרחק והסרה

הוסיפו קו תחתון לטקסט עם text-decoration, ואז שלטו בקו: בצבע, בסגנון, בעובי ובמרחק שלו מהטקסט. וגם איך מסירים את הקו התחתון מקישורים, ומתי לא כדאי.

בדף הזה יש עורכים שאפשר להריץ - לערוך, להריץ ולראות את הפלט מיד.

מאת Kevin Spektor, מייסד שותף ו-CTO

פורסם ב-Sep 24, 2026

איך מוסיפים קו תחתון לטקסט ב-CSS

text-decoration: underline מצייר קו מתחת לטקסט. הקו מקבל את צבע הטקסט, אלא אם נותנים לו צבע משלו.

<!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>

השורה השנייה משתמשת בקיצור text-decoration לסוג הקו, לסגנון ולצבע, ואז קובעת את העובי ואת המרחק עם המאפיינים שלהם. המפרט מאפשר גם לכתוב את העובי בתוך הקיצור, אבל Safari זונח את כל ההצהרה כשמכניסים אותו, ולכן כתבו את text-decoration-thickness בנפרד.

המאפיינים של text-decoration

מאפיין	ערכים	ברירת מחדל
`text-decoration-line`	`underline`, `overline`, `line-through`, `none` (אפשר לשלב)	`none`
`text-decoration-style`	`solid`, `double`, `dotted`, `dashed`, `wavy`	`solid`
`text-decoration-color`	כל צבע	`currentColor` (צבע הטקסט)
`text-decoration-thickness`	אורך, אחוז, `auto`, `from-font`	`auto`
`text-underline-offset`	אורך, אחוז, `auto`	`auto`

text-decoration הוא הקיצור של ארבעת הראשונים, אבל השאירו את העובי מחוצה לו: Safari מתעלם מהצהרת text-decoration שמכילה אותו. text-underline-offset נפרד וצריך לכתוב אותו לבד.

סגנונות, צבעים ועובי

<!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>

הזזת הקו התחתון: text-underline-offset

כברירת מחדל הקו יושב קרוב לאותיות ומדלג סביב חלקים יורדים כמו g, p ו-y. text-underline-offset דוחף אותו עוד למטה, ולעתים קרובות זה נקרא נקי יותר בכותרות ובקישורים:

<!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>

הרווחים סביב החלקים היורדים מגיעים מ-text-decoration-skip-ink: auto, שפועל כברירת מחדל. הגדירו אותו ל-none לקו רציף.

הסרת הקו התחתון מקישורים

גיליון הסגנונות של הדפדפן מוסיף לקישורים קו תחתון. text-decoration: none מסיר אותו. מכיוון שקוראים רבים מזהים קישורים לפי הקו התחתון, החזירו אותו ב-hover ובפוקוס מקלדת, ותנו לקישור צבע ששונה מהטקסט:

<!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>

סרגלי ניווט וכפתורים הם מקום הוגן לוותר על הקו התחתון, כי המיקום שלהם כבר אומר "קישור". בתוך פסקת טקסט, השאירו אותו. עוד על מצבי קישורים בדף על hover.

קו עליון וקו חוצה

text-decoration-line מצייר גם קו מעל הטקסט או דרכו, ומקבל יותר מערך אחד:

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

קו חוצה דרך CSS הוא ויזואלי בלבד. כשהטקסט הוא תוכן שנמחק (מחיר שהשתנה, פריט שהוסר), סמנו אותו עם <s> או <del>, כמו שמראה הדף על קו תחתון ב-HTML, כדי שהמשמעות תהיה בסימון ולא רק בעיצוב.

טעויות נפוצות

שימוש ב-<u> לקו תחתון לצורך עיצוב. <u> מיועד לטקסט שמסומן כשונה, כמו שגיאות כתיב. לקו תחתון מעוצב, השתמשו ב-CSS.
קו תחתון לטקסט שאינו קישור. קוראים ינסו ללחוץ עליו. להדגשה, השתמשו במקום זאת בהדגשה, בצבע או ברקע.
הסרת קווים תחתונים מקישורים בטקסט רץ בלי סימן אחר. צבע לבדו לא מספיק לקוראים שלא רואים את ההבדל.
לנסות להסיר את הקו התחתון של ההורה מתוך ילד. אי אפשר לבטל אותו מבפנים; שנו את ההורה או הפכו את הילד ל-inline-block.
לצפות ל-text-underline-offset בתוך הקיצור. זה מאפיין בפני עצמו.
לשים את העובי בקיצור. text-decoration: underline 2px עובד ב-Chrome וב-Firefox, אבל Safari זונח את כל ההצהרה. השתמשו ב-text-decoration-thickness.

שאלות נפוצות

איך מוסיפים קו תחתון לטקסט ב-CSS?

השתמשו ב-text-decoration: underline; על האלמנט. למראה של הקו, הוסיפו text-decoration-color, text-decoration-style, text-decoration-thickness ו-text-underline-offset.

איך מסירים את הקו התחתון מקישור?

הגדירו text-decoration: none; על האלמנט a. ודאו שהקישורים עדיין בולטים בדרך אחרת (צבע ועוד קו תחתון ב-hover או בפוקוס), כי קוראים רבים מסתמכים על הקו התחתון כדי לזהות קישורים.

איך משנים את צבע הקו התחתון?

השתמשו ב-text-decoration-color, או בקיצור: text-decoration: underline #f59e0b;. בלי זה, הקו משתמש בצבע הטקסט.

איך מוסיפים מרווח בין הטקסט לקו התחתון?

השתמשו ב-text-underline-offset, למשל text-underline-offset: 4px;. ערכים גדולים יותר מרחיקים את הקו מתחת לטקסט.

למה אי אפשר להסיר את הקו התחתון מאלמנט ילד?

קו תחתון שמצייר הורה נמתח על פני הילדים שלו ואי אפשר להסיר אותו מבפנים. הסירו אותו מהאלמנט שמגדיר אותו, או הפכו את הילד ל-display: inline-block, שהקישוט של ההורה לא מגיע אליו.

מושגים קשורים