קו שנמתח מתחת ללינק מכיוון הקריאה. הסוד: transform-origin לוגי שמתהפך נכון בעברית.
מתי משתמשים: לינקים בניווט ובטקסט רץ.
הדמו כאן עיצובי-ניטרלי בכוונה. כשהמהלך נכנס לפרויקט, מיובאת רק ההתנהגות: הצבעים, הרדיוסים, הפונטים והצללים יורשים את העיצוב של אותו פרויקט.
הקוד כאן עומד בפני עצמו. כל טוקן עיצוב נושא ברירת מחדל, מחלקות העזר של המאגר מוטמעות בו, ותגי הסקריפט מסודרים לפי הסדר הנכון. פרויקט שמגדיר --accent או --line משלו יורש אותם אוטומטית. הרכיב הזה מסתמך על dir="rtl".
/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.stage{padding:var(--sec, clamp(120px, 12vw, 260px)) var(--gutter, clamp(24px, 5vw, 96px));position:relative}
.stage.tight{padding-block:clamp(48px,5vw,90px)}
.stage.full{padding-inline:0}
/* CSS02 · קו תחתון שנמתח (RTL-נכון) */
.ul-row{display:flex;gap:40px;justify-content:center;font-weight:500;font-size:18px}
.ulink{position:relative;padding-bottom:4px;cursor:pointer}
.ulink::after{content:"";position:absolute;bottom:0;inset-inline:0;height:2px;background:var(--accent, #4a3aff);
transform:scaleX(0);transform-origin:right;transition:transform .3s cubic-bezier(.2,.6,.2,1)}
html[dir="ltr"] .ulink::after{transform-origin:left}
.ulink:hover::after{transform:scaleX(1)}<div class="stage tight"><div class="ul-row"><span class="ulink">אודות</span><span class="ulink">שירותים</span><span class="ulink">פרויקטים</span><span class="ulink">צור קשר</span></div></div>