After pseudo-element in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What will be displayed by this CSS code?

Consider the following HTML and CSS. What text will appear after the paragraph content in the browser?

CSS

p::after { content: ' - Read more'; color: blue; }

A The paragraph text followed by ' - Read more' in blue color.

B Only ' - Read more' in blue color, no paragraph text.

C The paragraph text followed by ' - Read more' in default black color.

D The paragraph text with no extra text after it.

💡 Hint

The ::after pseudo-element adds content after the element's content.

The ::after pseudo-element inserts content after the element's content. Here, it adds the text ' - Read more' in blue color after the paragraph text.

❓ selector

intermediate

Which selector correctly targets the after pseudo-element of all list items?

You want to style the after pseudo-element of every

element. Which CSS selector should you use?

A .li::after

B li:after

C li::after

D li.after

💡 Hint

The modern syntax for pseudo-elements uses two colons (::).

The correct selector for the after pseudo-element is li::after. Using one colon :after is old syntax but still works in many browsers. Classes or other selectors like .li::after or li.after do not target the pseudo-element.

🧠 Conceptual

advanced

What happens if you use the after pseudo-element without the content property?

Given this CSS: p::after { color: red; } What will be the visible effect in the browser?

A The browser will show an error and ignore the rule.

B A red empty box will appear after the paragraph.

C The paragraph text will turn red.

D No visible content will appear after the paragraph because content is missing.

💡 Hint

The content property is required for pseudo-elements to display anything.

The content property is mandatory for ::after to show anything. Without it, the pseudo-element exists but has no visible content, so nothing appears.

❓ layout

advanced

How to make the after pseudo-element appear on a new line?

You want the text added by ::after to appear below the element's text, not inline. Which CSS rule achieves this?

CSS

p::after { content: 'Note'; /* what to add here? */ }

A display: block;

B position: absolute;

C float: right;

D visibility: visible;

💡 Hint

Changing display to block makes the element take full width and appear on a new line.

By default, ::after is inline. Setting display: block; makes it appear on its own line below the element's content.

❓ accessibility

expert

What is the accessibility concern when using the after pseudo-element to add important text?

If you add important information using ::after content, what accessibility issue might occur?

A The content will cause keyboard navigation to break.

B Screen readers may not read the content added by <code>::after</code>.

C The content will always be read twice by screen readers.

D The content will be visible only on mobile devices.

💡 Hint

Pseudo-elements content is often ignored by assistive technologies.

Content added with ::after is usually not accessible to screen readers. Important information should be in the HTML itself, not only in CSS.