How is an arrow displayed in the demo box above?

This CSS code styles a container with the class .demo-content and uses the ::after pseudo-element to add a decorative arrow (▼), which is a UTF-8 character representing a downward-pointing triangle.

Explanation of the CSS Code

.demo-content

• position: relative; – Sets up a positioning context for the ::after element.
• background-color: #000; – Applies a black background.
• color: #fff; – Makes the text white.
• padding: 10px 20px; – Adds space inside the element.
• border-radius: 6px; – Rounds the corners.

.demo-content::after

• position: absolute; – Positions the triangle relative to .demo-content.
• font-size: 2em; – Makes the triangle larger.
• color: #000; – Sets the triangle color to black.
• content: "▼"; – Inserts the UTF-8 character (downward triangle).
• top: 23px; – Positions the triangle below the main box.
• left: 50%; – Centers it horizontally.