::after

Content inserted with ::after is inserted after other content within the element and is displayed inline by default. The content value is specified using the content property.

Syntax

element::after { content: "text" }

Element - this can be (for example) - class, id and other selectors.

Content - it can be (for example) - a word, a link, a color, and other properties.

Visual presentation

Examples

Add text at the end of the sentence.

• HTML
• CSS
• Result

	  
	<p class="new-text">New content is added to CSSPortal.</p> 
	<p>Here is the normal text to show that nothing will happen here.</p> 
	<p class="danger-text">We will try not to delete anything important.</p>

	

	.new-text::after
	{
	content: " - COOL!";
	color: green;
	} 
	
	.danger-text::after
	{ content: " - WARNING!";
	color: red;
	}