After pseudo-element in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the ::after pseudo-element in CSS?

The ::after pseudo-element lets you insert content after an element's actual content without changing the HTML. It's like adding a note after a paragraph using CSS.

beginner

How do you add text using the ::after pseudo-element?

You use the content property inside the ::after selector. For example: p::after { content: ' - thank you!'; } adds ' - thank you!' after every paragraph.

intermediate

Can the ::after pseudo-element add images or icons?

Yes! You can add images by using content: url('image.png'); or use Unicode characters like emojis. This lets you decorate elements without extra HTML.

intermediate

Why is it important to set display property with ::after?

By default, ::after is inline. To control layout or add block elements, set display to block or inline-block. This helps with spacing and positioning.

beginner

What is a common use case for ::after in web design?

A common use is adding decorative icons, clearing floats with content: ''; and display: block;, or adding quotes after text. It helps keep HTML clean and styles flexible.

Which CSS property is required to make ::after show content?

A display

B content

C position

D visibility

The content property defines what the ::after pseudo-element inserts after the element.

What is the correct syntax to add text after all p elements?

A p:after { content: 'text'; }

B p-after { content: 'text'; }

C p::after { content: 'text'; }

D p.after { content: 'text'; }

The double colon ::after is the modern syntax for pseudo-elements.

Can ::after add content without modifying HTML?

A Yes, it adds content purely with CSS

B No, HTML must be changed

C Only with JavaScript

D Only in inline styles

::after inserts content visually using CSS only, no HTML changes needed.

What happens if you omit the content property in ::after?

A Default text appears

B Browser error

C Element disappears

D Nothing is shown

Without content, the ::after pseudo-element does not display anything.

Which display value helps ::after behave like a block element?

A block

B none

C inline

D flex

Setting display: block; makes ::after behave like a block, taking full width.

Explain how the ::after pseudo-element works and give an example of adding text after a paragraph.

Think about adding something after an element without changing HTML.

Describe why setting the display property is important when using ::after and how it affects layout.

Consider how inline vs block elements behave visually.