[{"data":1,"prerenderedAt":253},["ShallowReactive",2],{"lesson:t5-s03-pseudo-elements":3,"course:taropood":57},{"meta":4,"prev":11,"next":15,"sections":19},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},true,3,"t5-s03-pseudo-elements","book",5,"فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},2,"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":16,"slug":17,"source":8,"term":9,"title_fa":18},4,"t5-s04-forms-styling","فصل ۰۴ — استایل فرم",[20,24,27,32,35,38,41,44,47,50,54],{"kind":21,"heading":22,"html":23},"normal","در این فصل چه می‌سازی","\u003Ch2 id=\"در-این-فصل-چه-می‌سازی\">در این فصل چه می‌سازی\u003Ca class=\"head-anchor\" href=\"#%D8%AF%D8%B1-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84-%DA%86%D9%87-%D9%85%DB%8C%E2%80%8C%D8%B3%D8%A7%D8%B2%DB%8C\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>آخر این فصل یک کارتِ نقلِ‌قول داری که تزئین‌هایش \u003Cstrong>اصلاً در HTML نیستند\u003C\u002Fstrong>: کنارِ عنوان یک نوارِ رنگیِ کوچک نشسته، دورِ متنِ نقلِ‌قول یک جفت علامتِ گیومهٔ درشت آمده، و تهِ لینکِ «نظرهای بیشتر» یک فلشِ کوچک اضافه شده. اگر به HTML نگاه کنی، هیچ‌کدامِ این‌ها را نمی‌بینی — همه را CSS با یک ابزارِ تازه ساخته: pseudo-element.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-pseudo-element-boxes.7cd5085cfc.160.webp 160w, \u002F_img\u002F01-image-pseudo-element-boxes.7cd5085cfc.320.webp 320w, \u002F_img\u002F01-image-pseudo-element-boxes.7cd5085cfc.640.webp 640w, \u002F_img\u002F01-image-pseudo-element-boxes.7cd5085cfc.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-pseudo-element-boxes.7cd5085cfc.1280.jpg\" srcset=\"\u002F_img\u002F01-image-pseudo-element-boxes.7cd5085cfc.160.jpg 160w, \u002F_img\u002F01-image-pseudo-element-boxes.7cd5085cfc.320.jpg 320w, \u002F_img\u002F01-image-pseudo-element-boxes.7cd5085cfc.640.jpg 640w, \u002F_img\u002F01-image-pseudo-element-boxes.7cd5085cfc.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"یک جعبهٔ محتوای پُررنگ در وسط با دو جعبهٔ کم‌رنگِ خط‌چین در دو طرفش — یکی چسبیده به ابتدا و یکی به انتها — که نشان می‌دهد pseudo-element ها دو جعبهٔ اضافه‌اند که مرورگر می‌سازد و در HTML وجود ندارند\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cp>آخر این فصل می‌توانی:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>با \u003Ccode>::before\u003C\u002Fcode> و \u003Ccode>::after\u003C\u002Fcode> محتوایی بسازی که در HTML نیست\u003C\u002Fli>\n\u003Cli>بگویی چرا property به‌اسمِ \u003Ccode>content\u003C\u002Fcode> برای این کار اجباری است\u003C\u002Fli>\n\u003Cli>با pseudo-element یک عنوان، یک نقلِ‌قول و یک لینک را تزئین کنی\u003C\u002Fli>\n\u003Cli>بدانی چرا این محتوا فقط تزئینی است و متنِ مهم را نباید در آن گذاشت\u003C\u002Fli>\n\u003C\u002Ful>\n",{"kind":21,"heading":25,"html":26},"قبل از شروع","\u003Ch2 id=\"قبل-از-شروع\">قبل از شروع\u003Ca class=\"head-anchor\" href=\"#%D9%82%D8%A8%D9%84-%D8%A7%D8%B2-%D8%B4%D8%B1%D9%88%D8%B9\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>از ترم ۲:\u003C\u002Fstrong> \u003Ccode>background-color\u003C\u002Fcode>، \u003Ccode>border\u003C\u002Fcode>، \u003Ccode>color\u003C\u002Fcode> و \u003Ccode>text-decoration\u003C\u002Fcode> — استایلِ چیزی که pseudo-element می‌سازیم.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از ترم ۳:\u003C\u002Fstrong> \u003Ccode>flexbox\u003C\u002Fcode> (\u003Ccode>display: flex\u003C\u002Fcode>، \u003Ccode>align-items\u003C\u002Fcode>، \u003Ccode>gap\u003C\u002Fcode>) — برای چیدنِ نوارِ کنارِ عنوان.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از این ترم (فصل ۱):\u003C\u002Fstrong> ایده‌ای که selector می‌تواند چیزی فراتر از خودِ عنصر را هدف بگیرد.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>مثل همیشه فقط یک مرورگر لازم داری، یا فقط همین آزمایشگاه.\u003C\u002Fp>\n",{"kind":28,"heading":29,"html":30,"embed":31},"lab","","— یک عنوان، یک نقلِ‌قولِ ساده و یک لینک می‌بینی، همه بی‌تزئین. کارِ این فصل این است که خط‌به‌خط با pseudo-element به هرکدام یک جزئیاتِ کوچک اضافه کنی و ببینی از کجا می‌آید","\u002Flab\u002Fembed\u002Ftaropood\u002Fterm-5-interaction\u002Fsession-03-pseudo-elements",{"kind":21,"heading":33,"html":34},"۱. pseudo-element چیست؟ و چرا content اجباری است","\u003Ch2 id=\"۱-pseudo-element-چیست-و-چرا-content-اجباری-است\">۱. pseudo-element چیست؟ و چرا \u003Ccode>content\u003C\u002Fcode> اجباری است\u003Ca class=\"head-anchor\" href=\"#%DB%B1-pseudo-element-%DA%86%DB%8C%D8%B3%D8%AA-%D9%88-%DA%86%D8%B1%D8%A7-content-%D8%A7%D8%AC%D8%A8%D8%A7%D8%B1%DB%8C-%D8%A7%D8%B3%D8%AA\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>یک \u003Ccode>pseudo-element\u003C\u002Fcode> یک تکهٔ تازه است که مرورگر \u003Cstrong>به‌جای تو\u003C\u002Fstrong> داخلِ یک عنصر می‌سازد، بی‌آنکه تو در HTML چیزی بنویسی. با دو تای پرکاربردش شروع می‌کنیم: \u003Ccode>::before\u003C\u002Fcode> یک تکه در \u003Cstrong>ابتدای\u003C\u002Fstrong> عنصر می‌سازد و \u003Ccode>::after\u003C\u002Fcode> یک تکه در \u003Cstrong>انتهای\u003C\u002Fstrong> آن. دقت کن که این‌ها دو تا \u003Ccode>:\u003C\u002Fcode> دارند (\u003Ccode>::\u003C\u002Fcode>)، برخلافِ pseudo-class ها که یکی داشتند — همین علامت به تو می‌گوید داری یک تکهٔ تازه می‌سازی، نه یک حالت را هدف می‌گیری.\u003C\u002Fp>\n\u003Cp>بیا کنارِ عنوان یک نوارِ رنگیِ کوچک بگذاریم. اول عنوان را یک flex container کن تا نوار و متن کنارِ هم بنشینند، بعد \u003Ccode>::before\u003C\u002Fcode> را بساز:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.page h1 {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 1.5rem;\n}\n\n.page h1::before {\n  width: 10px;\n  height: 24px;\n  border-radius: 3px;\n  background-color: #bc3e1c;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>به صفحه نگاه کن: هیچ نواری نیست! رنگ و اندازه را دادیم، ولی انگار \u003Ccode>::before\u003C\u002Fcode> اصلاً وجود ندارد.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> این پرتکرارترین اشتباهِ pseudo-element هاست. یک \u003Ccode>::before\u003C\u002Fcode> یا \u003Ccode>::after\u003C\u002Fcode> تا وقتی property به‌اسمِ \u003Ccode>content\u003C\u002Fcode> نداشته باشد، \u003Cstrong>اصلاً ساخته نمی‌شود\u003C\u002Fstrong> — انگار نوشته‌ای‌اش ولی مرورگر نادیده‌اش می‌گیرد. \u003Ccode>content\u003C\u002Fcode> همان چیزی است که به مرورگر می‌گوید «این تکه واقعاً باید باشد». حتی اگر محتوایی نمی‌خواهی و فقط یک جعبهٔ رنگی می‌خواهی، باید \u003Ccode>content\u003C\u002Fcode> را با یک رشتهٔ \u003Cstrong>خالی\u003C\u002Fstrong> بنویسی. این خط را به بالای قاعده اضافه کن:\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.page h1::before {\n  content: "";\n  width: 10px;\n  height: 24px;\n  border-radius: 3px;\n  background-color: #bc3e1c;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> حالا یک نوارِ قرمزِ کوچک درست کنارِ عنوان ظاهر شد. آن \u003Ccode>content: ""\u003C\u002Fcode> خالی است ولی حضورش لازم بود. خطِ \u003Ccode>content\u003C\u002Fcode> را یک‌بار پاک کن و ببین نوار دوباره غیب می‌شود — این را خوب یادت بماند.\u003C\u002Fp>\n",{"kind":21,"heading":36,"html":37},"۲. content با متن: علامتِ نقلِ‌قول","\u003Ch2 id=\"۲-content-با-متن-علامتِ-نقلِ‌قول\">۲. \u003Ccode>content\u003C\u002Fcode> با متن: علامتِ نقلِ‌قول\u003Ca class=\"head-anchor\" href=\"#%DB%B2-content-%D8%A8%D8%A7-%D9%85%D8%AA%D9%86-%D8%B9%D9%84%D8%A7%D9%85%D8%AA%D9%90-%D9%86%D9%82%D9%84%D9%90%E2%80%8C%D9%82%D9%88%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>\u003Ccode>content\u003C\u002Fcode> فقط خالی نمی‌ماند؛ می‌توانی داخلش \u003Cstrong>متن\u003C\u002Fstrong> بگذاری و مرورگر همان را روی صفحه می‌سازد. یک کاربردِ کلاسیک، گذاشتنِ علامتِ گیومه دورِ یک نقلِ‌قول است. با \u003Ccode>::before\u003C\u002Fcode> گیومهٔ باز و با \u003Ccode>::after\u003C\u002Fcode> گیومهٔ بسته را به متنِ نقلِ‌قول بچسبان:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.quote p::before {\n  content: "«";\n  color: #2a6b93;\n  font-size: 1.6rem;\n  font-weight: 700;\n  margin-inline-end: 4px;\n}\n\n.quote p::after {\n  content: "»";\n  color: #2a6b93;\n  font-size: 1.6rem;\n  font-weight: 700;\n  margin-inline-start: 4px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> حالا دورِ متنِ نقلِ‌قول یک جفت گیومهٔ درشتِ آبی نشست — درست اولِ و آخرِ همان خط. این دو کاراکتر در HTML نیستند؛ اگر متنِ صفحه را کپی کنی، گیومه‌ها معمولاً کپی نمی‌شوند، چون بخشی از متنِ واقعی نیستند. همین نکته ما را به بخشِ بعد می‌رساند.\u003C\u002Fp>\n",{"kind":21,"heading":39,"html":40},"۳. ::after برای یک نشانه: فلشِ «بیشتر»","\u003Ch2 id=\"۳-after-برای-یک-نشانه-فلشِ-بیشتر\">۳. \u003Ccode>::after\u003C\u002Fcode> برای یک نشانه: فلشِ «بیشتر»\u003Ca class=\"head-anchor\" href=\"#%DB%B3-after-%D8%A8%D8%B1%D8%A7%DB%8C-%DB%8C%DA%A9-%D9%86%D8%B4%D8%A7%D9%86%D9%87-%D9%81%D9%84%D8%B4%D9%90-%D8%A8%DB%8C%D8%B4%D8%AA%D8%B1\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>روی لینک‌ها هم \u003Ccode>::after\u003C\u002Fcode> عالی است. بیا تهِ لینکِ «نظرهای بیشتر» یک فلشِ کوچک بگذاریم تا نشان بدهد جایی می‌برد:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.more {\n  color: #2a6b93;\n  font-weight: 700;\n  text-decoration: none;\n}\n\n.more::after {\n  content: " ←";\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> حالا بعد از متنِ لینک یک فلش دیده می‌شود. چون صفحه راست‌به‌چپ است، فلشِ «رو به جلو» به سمتِ چپ اشاره می‌کند. عددِ فاصله و خودِ علامت را عوض کن (مثلاً \u003Ccode>" ↩"\u003C\u002Fcode> یا \u003Ccode>" •"\u003C\u002Fcode>) و ببین چطور فوری تغییر می‌کند.\u003C\u002Fp>\n",{"kind":21,"heading":42,"html":43},"۴. مهم: content تزئینی است، نه متنِ واقعی","\u003Ch2 id=\"۴-مهم-content-تزئینی-است-نه-متنِ-واقعی\">۴. مهم: content تزئینی است، نه متنِ واقعی\u003Ca class=\"head-anchor\" href=\"#%DB%B4-%D9%85%D9%87%D9%85-content-%D8%AA%D8%B2%D8%A6%DB%8C%D9%86%DB%8C-%D8%A7%D8%B3%D8%AA-%D9%86%D9%87-%D9%85%D8%AA%D9%86%D9%90-%D9%88%D8%A7%D9%82%D8%B9%DB%8C\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>یک قانونِ مهم که به SEO و دسترس‌پذیری وصل است: چیزی که در \u003Ccode>content\u003C\u002Fcode> می‌گذاری فقط برای \u003Cstrong>تزئین\u003C\u002Fstrong> است. این متن بخشِ واقعیِ صفحه نیست — انتخاب نمی‌شود، ترجمه نمی‌شود، در جست‌وجو پیدا نمی‌شود، و بعضی screen reader ها اصلاً آن را نمی‌خوانند. AI crawler ها هم که JavaScript و گاهی این محتوای ساختگی را نمی‌بینند.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>⚠️ \u003Cstrong>مواظب باش:\u003C\u002Fstrong> هیچ‌وقت متنِ \u003Cstrong>مهم\u003C\u002Fstrong> را فقط در \u003Ccode>content\u003C\u002Fcode> نگذار. اگر یک جمله باید خوانده و پیدا شود، جایش داخلِ HTML واقعی است (\u003Ccode><p>\u003C\u002Fcode>، \u003Ccode><span>\u003C\u002Fcode>، …). گیومه و فلش و نوارِ رنگی چون فقط تزئین‌اند، جایشان در \u003Ccode>content\u003C\u002Fcode> درست است؛ ولی «۲۰٪ تخفیف» یا نامِ یک محصول هرگز نباید فقط یک pseudo-element باشد.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":45,"html":46},"کد کاملِ این فصل","\u003Ch2 id=\"کد-کاملِ-این-فصل\">کد کاملِ این فصل\u003Ca class=\"head-anchor\" href=\"#%DA%A9%D8%AF-%DA%A9%D8%A7%D9%85%D9%84%D9%90-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>اول \u003Ccode>index.html\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><!-- index.html -->\n<!DOCTYPE html>\n<html lang="fa" dir="rtl">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1">\n    <title>pseudo-element ها<\u002Ftitle>\n    <link rel="stylesheet" href="styles.css">\n  <\u002Fhead>\n  <body>\n    <main class="page">\n      <h1>نظر خواننده‌ها<\u002Fh1>\n      <blockquote class="quote">\n        <p>این درس‌ها را که خواندم، اولین سایتم را در یک هفته ساختم.<\u002Fp>\n      <\u002Fblockquote>\n      <a class="more" href="#">نظرهای بیشتر<\u002Fa>\n    <\u002Fmain>\n  <\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>و \u003Ccode>styles.css\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>\u002F* styles.css *\u002F\n* {\n  box-sizing: border-box;\n}\n\nbody {\n  margin: 0;\n  font-family: Tahoma, sans-serif;\n  background-color: #f6edda;\n  color: #2c2114;\n  line-height: 1.8;\n}\n\n.page {\n  padding: 24px;\n  max-width: 480px;\n}\n\n\u002F* onvan yek nava-r-e taakid-e kenari migirad *\u002F\n.page h1 {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 1.5rem;\n}\n\n\u002F* content khali ast vali BAYAD bashad, vagarna hich chiz peyda nemishavad *\u002F\n.page h1::before {\n  content: "";\n  width: 10px;\n  height: 24px;\n  border-radius: 3px;\n  background-color: #bc3e1c;\n}\n\n.quote {\n  margin-block: 20px;\n  padding: 16px 20px;\n  border-inline-start: 4px solid #2a6b93;\n  border-radius: 8px;\n  background-color: #ffffff;\n}\n\n.quote p {\n  margin: 0;\n}\n\n\u002F* alamat-e naghl-e ghol: metn dakhel-e content *\u002F\n.quote p::before {\n  content: "«";\n  color: #2a6b93;\n  font-size: 1.6rem;\n  font-weight: 700;\n  margin-inline-end: 4px;\n}\n\n.quote p::after {\n  content: "»";\n  color: #2a6b93;\n  font-size: 1.6rem;\n  font-weight: 700;\n  margin-inline-start: 4px;\n}\n\n.more {\n  color: #2a6b93;\n  font-weight: 700;\n  text-decoration: none;\n}\n\n\u002F* flesh-e tazeini bad az matn-e link *\u002F\n.more::after {\n  content: " ←";\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F02-image-decorated-quote.5d79aa1f23.160.webp 160w, \u002F_img\u002F02-image-decorated-quote.5d79aa1f23.320.webp 320w, \u002F_img\u002F02-image-decorated-quote.5d79aa1f23.640.webp 640w, \u002F_img\u002F02-image-decorated-quote.5d79aa1f23.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F02-image-decorated-quote.5d79aa1f23.1280.jpg\" srcset=\"\u002F_img\u002F02-image-decorated-quote.5d79aa1f23.160.jpg 160w, \u002F_img\u002F02-image-decorated-quote.5d79aa1f23.320.jpg 320w, \u002F_img\u002F02-image-decorated-quote.5d79aa1f23.640.jpg 640w, \u002F_img\u002F02-image-decorated-quote.5d79aa1f23.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"یک کارتِ نقلِ‌قول با یک جفت شکلِ تزئینیِ درشتِ گیومه‌مانند در گوشه‌ها، یک نوارِ رنگیِ کوچک کنارِ عنوان، و یک فلشِ کوچک تهِ لینک — همه به‌عنوانِ تزئین‌هایی که CSS اضافه کرده\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> از دستیارِ AI ات بپرس «فرقِ \u003Ccode>::before\u003C\u002Fcode> با یک \u003Ccode><span>\u003C\u002Fcode> واقعی در HTML چیست و کِی کدام را به‌کار ببرم؟». جوابش را با چیزی که همین فصل دیدی بسنج: pseudo-element برای \u003Cstrong>تزئین\u003C\u002Fstrong> است و متنش کپی و جست‌وجو نمی‌شود، پس متنِ مهم باید \u003Ccode><span>\u003C\u002Fcode> واقعی باشد. اگر AI پیشنهاد داد یک متنِ معنادار را در \u003Ccode>content\u003C\u002Fcode> بگذاری، همان‌جا با این قانون ردش کن.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":48,"html":49},"واژه‌های تازهٔ این فصل","\u003Ch2 id=\"واژه‌های-تازهٔ-این-فصل\">واژه‌های تازهٔ این فصل\u003Ca class=\"head-anchor\" href=\"#%D9%88%D8%A7%DA%98%D9%87%E2%80%8C%D9%87%D8%A7%DB%8C-%D8%AA%D8%A7%D8%B2%D9%87%D9%94-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>کلمه\u003C\u002Fth>\n\u003Cth>تلفظ به حروف فارسی\u003C\u002Fth>\n\u003Cth>یعنی چه\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>pseudo-element\u003C\u002Ftd>\n\u003Ctd>سودو-اِلِمنت\u003C\u002Ftd>\n\u003Ctd>تکه‌ای که مرورگر می‌سازد و در HTML نیست؛ با \u003Ccode>::\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>::before\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>بیفور\u003C\u002Ftd>\n\u003Ctd>تکه‌ای که در ابتدای عنصر ساخته می‌شود\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>::after\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>افتر\u003C\u002Ftd>\n\u003Ctd>تکه‌ای که در انتهای عنصر ساخته می‌شود\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>content\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>کانتنت\u003C\u002Ftd>\n\u003Ctd>property که می‌گوید pseudo-element چه محتوایی دارد؛ \u003Cstrong>بدونش ساخته نمی‌شود\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n",{"kind":51,"heading":52,"html":53},"checkpoint","تمرین‌ها","\u003Ch2 id=\"تمرین‌ها\">تمرین‌ها\u003Ca class=\"head-anchor\" href=\"#%D8%AA%D9%85%D8%B1%DB%8C%D9%86%E2%80%8C%D9%87%D8%A7\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>قبل از تمرین، بدون نگاه‌کردن به بالا جواب بده: چرا یک \u003Ccode>::before\u003C\u002Fcode> بدونِ \u003Ccode>content\u003C\u002Fcode> روی صفحه دیده نمی‌شود؟\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین اجباری:\u003C\u002Fstrong> یک لینکِ بیرونی بساز و با \u003Ccode>::after\u003C\u002Fcode> یک نشانهٔ کوچک (مثلاً \u003Ccode>" ↗"\u003C\u002Fcode>) بهش اضافه کن تا معلوم باشد به سایتِ دیگری می‌رود. بعد یک عنوانِ دوم بساز و مثلِ همین فصل با \u003Ccode>::before\u003C\u002Fcode> و \u003Ccode>content: ""\u003C\u002Fcode> یک نوارِ رنگیِ کناری بهش بده. مطمئن شو در هر دو، خطِ \u003Ccode>content\u003C\u002Fcode> را که برداری تزئین غیب می‌شود.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> یک نشانِ کوچک («جدید») برای کنارِ یک عنوان بساز — این‌بار متنش را در \u003Ccode>content\u003C\u002Fcode> بگذار و با \u003Ccode>background-color\u003C\u002Fcode>، \u003Ccode>padding\u003C\u002Fcode> و \u003Ccode>border-radius\u003C\u002Fcode> شکلش بده. بعد فکر کن و یک جمله بنویس: چرا این کاربردْ مرزی است و بهتر بود اگر واقعاً مهم بود، در HTML باشد نه در \u003Ccode>content\u003C\u002Fcode>؟\u003C\u002Fp>\n",{"kind":21,"heading":55,"html":56},"در فصل بعد","\u003Ch2 id=\"در-فصل-بعد\">در فصل بعد\u003Ca class=\"head-anchor\" href=\"#%D8%AF%D8%B1-%D9%81%D8%B5%D9%84-%D8%A8%D8%B9%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>الان می‌توانی با selector و pseudo-element جزئیاتِ ظاهری بسازی. فصل بعد سراغِ چیزی می‌رویم که تا حالا بهش دست نزدیم: \u003Cstrong>فرم‌ها\u003C\u002Fstrong>. یاد می‌گیری \u003Ccode><input>\u003C\u002Fcode>، \u003Ccode><button>\u003C\u002Fcode>، \u003Ccode><select>\u003C\u002Fcode> و \u003Ccode><textarea>\u003C\u002Fcode> را استایل بدهی، با selector صفتی مثلِ \u003Ccode>[type="email"]\u003C\u002Fcode> عنصرها را بر اساسِ صفتشان هدف بگیری، با \u003Ccode>:focus-within\u003C\u002Fcode> کلِ یک ردیف را موقعِ تایپ روشن کنی، و با \u003Ccode>accent-color\u003C\u002Fcode> رنگِ چیزی مثلِ checkbox را عوض کنی.\u003C\u002Fp>\n",{"course":58,"entitled":66,"lessons":67,"payments_enabled":66,"terms":252,"live":5},{"active_window":59,"effective_price_toman":60,"free":5,"lesson_count":61,"price_toman":62,"slug":63,"summary_fa":64,"title_fa":65},null,0,61,1500000,"taropood","از صفر تا ساختن سایت واقعی با HTML و CSS. متن‌محور، با آزمایشگاه زندهٔ داخل مرورگر و اصطلاح‌های اصیل.","تاروپود — خودآموز HTML و CSS",false,[68,72,75,78,81,84,88,92,96,100,104,107,110,113,116,119,122,125,128,131,134,138,141,144,147,150,153,156,159,162,165,168,171,174,177,180,183,186,189,192,195,198,199,200,201,204,207,210,213,216,219,222,225,228,231,234,237,240,243,246,249],{"free_preview":5,"order":69,"slug":70,"source":8,"term":69,"title_fa":71},1,"t1-s01-first-page","فصل ۰۱ — اولین صفحهٔ وب تو",{"free_preview":5,"order":12,"slug":73,"source":8,"term":69,"title_fa":74},"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":6,"slug":76,"source":8,"term":69,"title_fa":77},"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":16,"slug":79,"source":8,"term":69,"title_fa":80},"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":9,"slug":82,"source":8,"term":69,"title_fa":83},"t1-s05-lists","فصل ۰۵ — فهرست",{"free_preview":5,"order":85,"slug":86,"source":8,"term":69,"title_fa":87},6,"t1-s06-semantic","فصل ۰۶ — اسکلت معنادار صفحه",{"free_preview":5,"order":89,"slug":90,"source":8,"term":69,"title_fa":91},7,"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",{"free_preview":5,"order":93,"slug":94,"source":8,"term":69,"title_fa":95},8,"t1-s08-forms","فصل ۰۸ — فرم: گرفتن ورودی",{"free_preview":5,"order":97,"slug":98,"source":8,"term":69,"title_fa":99},9,"t1-s09-accessibility","فصل ۰۹ — دسترس‌پذیری از همان HTML",{"free_preview":5,"order":101,"slug":102,"source":8,"term":69,"title_fa":103},10,"t1-s10-first-project","فصل ۱۰ — پروژه: صفحهٔ معرفی خودت",{"free_preview":5,"order":69,"slug":105,"source":8,"term":12,"title_fa":106},"t2-s01-first-css","فصل ۰۱ — اولین CSS",{"free_preview":5,"order":12,"slug":108,"source":8,"term":12,"title_fa":109},"t2-s02-selectors","فصل ۰۲ — selector ها",{"free_preview":5,"order":6,"slug":111,"source":8,"term":12,"title_fa":112},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":16,"slug":114,"source":8,"term":12,"title_fa":115},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":9,"slug":117,"source":8,"term":12,"title_fa":118},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":85,"slug":120,"source":8,"term":12,"title_fa":121},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":89,"slug":123,"source":8,"term":12,"title_fa":124},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":93,"slug":126,"source":8,"term":12,"title_fa":127},"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":97,"slug":129,"source":8,"term":12,"title_fa":130},"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":101,"slug":132,"source":8,"term":12,"title_fa":133},"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",{"free_preview":5,"order":135,"slug":136,"source":8,"term":12,"title_fa":137},11,"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":69,"slug":139,"source":8,"term":6,"title_fa":140},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":12,"slug":142,"source":8,"term":6,"title_fa":143},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":6,"slug":145,"source":8,"term":6,"title_fa":146},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":16,"slug":148,"source":8,"term":6,"title_fa":149},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":9,"slug":151,"source":8,"term":6,"title_fa":152},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":85,"slug":154,"source":8,"term":6,"title_fa":155},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":89,"slug":157,"source":8,"term":6,"title_fa":158},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":93,"slug":160,"source":8,"term":6,"title_fa":161},"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":97,"slug":163,"source":8,"term":6,"title_fa":164},"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":101,"slug":166,"source":8,"term":6,"title_fa":167},"t3-s10-logical","فصل ۱۰ — logical properties",{"free_preview":5,"order":135,"slug":169,"source":8,"term":6,"title_fa":170},"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":69,"slug":172,"source":8,"term":16,"title_fa":173},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":12,"slug":175,"source":8,"term":16,"title_fa":176},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":6,"slug":178,"source":8,"term":16,"title_fa":179},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":16,"slug":181,"source":8,"term":16,"title_fa":182},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":9,"slug":184,"source":8,"term":16,"title_fa":185},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":85,"slug":187,"source":8,"term":16,"title_fa":188},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":89,"slug":190,"source":8,"term":16,"title_fa":191},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":93,"slug":193,"source":8,"term":16,"title_fa":194},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":69,"slug":196,"source":8,"term":9,"title_fa":197},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},{"free_preview":5,"order":16,"slug":17,"source":8,"term":9,"title_fa":18},{"free_preview":5,"order":9,"slug":202,"source":8,"term":9,"title_fa":203},"t5-s05-forms-validation","فصل ۰۵ — اعتبارسنجی فرم",{"free_preview":5,"order":85,"slug":205,"source":8,"term":9,"title_fa":206},"t5-s06-transforms","فصل ۰۶ — transform",{"free_preview":5,"order":89,"slug":208,"source":8,"term":9,"title_fa":209},"t5-s07-transitions","فصل ۰۷ — transition",{"free_preview":5,"order":93,"slug":211,"source":8,"term":9,"title_fa":212},"t5-s08-animation","فصل ۰۸ — animation و احترام به کاربر",{"free_preview":5,"order":97,"slug":214,"source":8,"term":9,"title_fa":215},"t5-s09-has-selector","فصل ۰۹ — :has() و تعامل بدون JavaScript",{"free_preview":5,"order":101,"slug":217,"source":8,"term":9,"title_fa":218},"t5-s10-interaction-project","فصل ۱۰ — پروژه: یک component تعاملی بدون JS",{"free_preview":5,"order":69,"slug":220,"source":8,"term":85,"title_fa":221},"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":12,"slug":223,"source":8,"term":85,"title_fa":224},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":6,"slug":226,"source":8,"term":85,"title_fa":227},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":16,"slug":229,"source":8,"term":85,"title_fa":230},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":9,"slug":232,"source":8,"term":85,"title_fa":233},"t6-s05-svg-icons","فصل ۰۵ — SVG و آیکون",{"free_preview":5,"order":85,"slug":235,"source":8,"term":85,"title_fa":236},"t6-s06-accessibility-deep","فصل ۰۶ — دسترس‌پذیری عمیق",{"free_preview":5,"order":89,"slug":238,"source":8,"term":85,"title_fa":239},"t6-s07-performance","فصل ۰۷ — سرعت",{"free_preview":5,"order":93,"slug":241,"source":8,"term":85,"title_fa":242},"t6-s08-architecture","فصل ۰۸ — معماری CSS در مقیاس بزرگ",{"free_preview":5,"order":97,"slug":244,"source":8,"term":85,"title_fa":245},"t6-s09-debugging","فصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌ها",{"free_preview":5,"order":101,"slug":247,"source":8,"term":85,"title_fa":248},"t6-s10-capstone-build","فصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ای",{"free_preview":5,"order":135,"slug":250,"source":8,"term":85,"title_fa":251},"t6-s11-capstone-ship","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",[],1784827105302]