What does ::before do?
::before is a pseudo-element that creates a virtual element before the content of the selected tag. It does not exist in the HTML markup, but appears in CSS and can contain text, an icon, or a decorative element.
How ::before works
For the pseudo-element to appear, the content property is required:
css
p::before {
content: "→ ";
color: red;
}HTML:
html
<p>Text</p>Result: On the page it will display like this:
javascript
→ TextWhat you can do with ::before
- add text or symbols (
content: "*") - add icons (including via fonts, for example FontAwesome)
- create decorative elements (ribbons, stripes, borders)
- use as an extra layer for styling (background, positioning)
For example, a decorative stripe:
css
h1::before {
content: "";
display: block;
width: 50px;
height: 4px;
background: black;
margin-bottom: 10px;
}Features
- not displayed without
content - counted as a child element in the visual sense, but not in the DOM
- often used together with
position: absolutefor complex effects ::beforehas a "pair",::after, which works similarly but inserts content after the element
Summary
::before is a way to add decorative or supplementary content before an element, without changing the HTML. It is one of the key tools for clean, flexible layout.
Short Answer
Interview readyPremium
A concise answer to help you respond confidently on this topic during an interview.