מה זה בכלל אלמנט מדומה?
אלמנט מדומה זה בעצם תוספת תוכן לתגית קיימת מבלי שבאמת הוספנו אותו פיזית לתוך התגית, למשל אם יש לנו div כלשהו ונרצה להכניס לתוכו את המילה Adobe, נצטרך בתוך קובץ ה html להקליד את המילה בתוך ה-div:

<div>Adobe</div>
מה שאלמנט מדומה מאפשר לנו זה להשאיר את ה- div ריק ובתוך ה-CSS בלבד להגדיר שהתוכן שלו יהיה המילה Adobe למשל.

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

<div>Adobe<div>
<div>Adobe<div>
<div>Adobe<div>
<div>Adobe<div>

נכתוב את זה כך בתוך ה-style של ה-CSS שלנו:

div::before
{
content:"Adobe";
}

ובקובץ ה-html נכתוב כך:

<div></div>
<div></div>
<div></div>
<div></div>

מה שנקבל יהיה זה:

Adobe
Adobe
Adobe
Adobe

כתיבה
כמו שראיתם התחביר של הכתיבה בקוד די דומה להוספת hover (מעבר עכבר) לכפתור
למשל תגית :: לפני/אחרי ואז התוכן.

לפני ואחרי
לכל אלמנט מדומה יש 2 אפשרויות:
before לפני התוכן האמיתי של אותה תגית.
After אחרי התוכן האמיתי של אותה תגית.

תגית תוכן
אם נרצה להוסיף את המילה Hello לפני כל תוכן ואת המשפט "!have a nice day" אחרי התוכן נעשה זאת כך ב-CSS:

div::before
{
content:"Hello ";
}


Div::after
{
Content:" have a nice day!";
}

בקובץ ה-html נרשום כך:

<div>Almog</div>
<div>Yaron</div>
<div>Tali</div>

התוצאה שנקבל תהיה זו:

Hello Almog have a nice day!
Hello Yaron have a nice day!
Hello Tali have a nice day!

יפה הא?! הנה עוד
אפשר חוץ מתוכן בצורת טקסט להכניס עוד דברים:

תגית ריקה none
אפשר בעזרתה למחוק הגדרה שעשינו קודם לתגיות ספציפיות:

div::before
{
content:"Hi";
}


#none::before
{
content:none;
}


<div>Almog</div>
<div>Yaron</div>
<div id="none">Tali is here too</div>

תוצאה:

Hi Almog
Hi Yaron
Tali is here too

תגית תמונה url
אפשר לתת אייקון או סמל לפני או אחרי תגית (מעולה לסעיפים עם אייקון)

.list::before
{
Content:url(bullet.png);
}


<div class="list">Banana</div>
<div class="list">Apple</div>
<div class="list">Avocado</div>
<div class="list">Peach</div>
<div class="list">Mango</div>

כך זה יראה:

Banana
Apple
Avocado
Peach
Mango

תגית מספור אוטומטי counter
נוכל למספר אוטומטית תגיות כמו רשימה בצורה הבאה:

.number
{
counter-increment: number;
}


.number::before
{
content:counter(number);
}


<div class="number"> Wine</div>
<div class="number"> Whiskey</div>
<div class="number"> Vodka</div>

זה מה שנקבל:

1 Wine
2 Whiskey
3 Vodka

תגית תכונה attribute
במקום לרשום שוב בתוך לינק למשל שוב את שורת הלינק נוכל לחזור על זה אוטומטית:

.newlink::before
{
content:attr(href);
}


<a class="newlink" href="http://www.almogshemesh.com" target="_blank"></a>

ככה נראה את זה:

http://www.almogshemesh.com

טיפ!
אלמנטים מדומים נתמכים ברוב הדפדפנים החדשים, אפילו באקספלורר 9
באקספלורר 8 כמובן יש בעיות אבל זה נפתר די בקלות לשם שינוי
פשוט במקום פעמיים נקודתיים :: ליד התגית נרשום פעם אחת :

div:after
{
content:"thanks for reading";
}