DEV Community

Karthick (k)
Karthick (k)

Posted on

CSS variable

Q1.padding: var(--section-pad);

This applies internal spacing (padding) to an element using a CSS variable. Instead of writing a fixed size like 20px or 2rem, the browser checks your CSS for-- section-pad (usually defined at the top of your stylesheet) and uses that specific value.

Q2. What are:: before and:: after?

These are CSS pseudo-elements. They allow you to create virtual boxes in your HTML that are styled by CSS but don't actually exist in your physical HTML file.

.::before creates a virtual element before the actual content of your target box.::after creates a virtual element after the actual content. Crucial Rule: They require the content: ""; property to work at all (even if the quotation marks are empty).

Common Uses: CSS variable, adding decorative icons or text before a heading.Creating background shapes, underlines, or borders without adding extra

tags to your HTML

Top comments (0)