العناصر الوهمية

يُسمّى ::before و::after عنصرين وهميّين (pseudo-elements)، وتنشئهما CSS داخل العنصر قبل محتواه أو بعده دون أن تكتب لهما وسمًا في HTML. ويُستعملان للزخرفة، مثل سهم أو علامة اقتباس أو أيقونة صغيرة، أي لكل ما لا يضيف إلى المحتوى معنًى.

وأول ما يحتاجان إليه الخاصية content، فبدونها لا يظهر شيء، ولهذا تكتبها دائمًا ولو بنصّ فارغ content: "". والفخّ الثاني أنهما عنصران سطريّان (inline) في الأصل، والعنصر السطري لا يقبل transform، فتكتب الحركة ولا يتحرّك شيء حتى تجعله inline-block.

ثم تأتي الحالات، فالحالة :hover لمن يستعمل الفأرة، و:focus-visible لمن يتنقّل بلوحة المفاتيح، والثانية تظهر عند الضغط على Tab ولا تظهر عند النقر بالفأرة، فلا عذر لك في إلغاء إطار التركيز.