קו מפריד עם אלמנט באמצע – כיצד עושים זאת ב CSS?

זהו פוסט קצר המתאר כיצד ליצור קו מפריד עם אלמנט באמצע, מעין סוג של divider עם טקסט או תמונה כאשר משמאל ומימין לו קיים אותו קו מפריד לטובת דקורציה. אז נאמר ואני מבקש מכם לעשות קו מפריד עם תמונה/טקסט באמצעו ושיהיה רספוניסיבי כמובן, אני מניח שהייתם משתמשים ב flexbox ועושים משהו בסגנון הבא:

<span>
    <img src="deco.svg">
</span>

וה CSS נראה כך:

span {
    display: flex;
    align-items: center;
}

span:before, span:after {
    content: "";
    height: 1px;
    flex-grow: 1;
    margin: 0 12px;
    background: #333;
}

span:before {
    background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#818078), to(transparent));
    background: linear-gradient(to right, #818078, transparent);
}

span:after {
    background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#818078), to(transparent));
    background: linear-gradient(to right, transparent, #818078);
}

img {
    width: 40px;
}

התוצאה תהיה כזו:

אך ישנה דרך, אולי אף סמנטית יותר לעשות זאת והיא באמצעות האלמנט <hr>כאשר ה markup ייראה כך:

<hr>

ה CSS יהיה כזה:

hr {
    position: relative;
    border: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

hr:before {
    content: '';
    background: linear-gradient(to right, transparent, #818078, transparent);
    position: absolute;
    top: 50%;
    width: 100%;
    height: 1px;
}

hr:after {
    content: "";
    position: relative;
    padding: 0 20px;
    background: #fcfcfa url('deco.svg') no-repeat center center;
    background-size: contain;
    width: 40px;
    height: 40px;
}

זה סמנטי יותר מכיוון ואנו משתמשים באלמנט <hr> הנועד להיות קו מפריד. מעבר לכך, מכיוון וזוהי תמונה דקוריטיבית בלבד נכון להשתמש ב background image בדיוק כפי שעשינו והתוצאה זהה:

אם אתם מתכננים לבדוק את זה באתר שלכם שימו לב כמובן שאין חוקים כלשהם הדורסים או מפריעים ל CSS המופיע בפוסט זה ..

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

<hr data-content="מפריד">

ה CSS יהיה:

hr {
    position: relative;
    border: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    font-size: 28px;
}


hr:before {
    content: '';
    background: linear-gradient(to right, transparent, #818078, transparent);
    position: absolute;
    top: 50%;
    width: 100%;
    height: 1px;
}

hr:after {
    content: attr(data-content);
    position: relative;
    padding: 0 20px;
    color: #818078;
    background-color: #fcfcfa;
    line-height: 1;
}

והתוצאה מאד נחמדה וכפי שצפיתם:

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

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

ניתן לעשות זאת גם עם CSS Grid

אגב, את אותה דוגמה ראשונה ניתן לבצע גם באמצעות css grid ובעזרת הפונקציה minmax. אז ה markup גם כן פשוט:

<h3>כותרת</h3>

וכך יראה ה CSS:

h3 {
    margin: 0;
    display: grid;
    width: 100%;
    align-items: center;
    text-align: center;
    grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr);
    grid-gap: 20px;
    font-weight: 400;
    font-size: 28px;
    color: #818078;
}

h3:before,
h3:after {
    content: '';
    height: 1px;
}

h3:after {
    background: linear-gradient(to right, transparent, #818078);
}

h3:before {
    background: linear-gradient(to right, #818078, transparent);
}

הנה התוצאה:

אם אנחנו משחקים מעט ה CSS בשילוב text-shadow ניתן לעשות דברים ממש יפים… הנה דוגמה:

אהבתם? פרגנו בלייק ושתפו חברים…. 🙂