Suggest an edit

Improve this article

Refine the answer for “What does ::before do?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

`::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
→ Text
```

---

### **What 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: absolute` for complex effects
- `::before` has 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.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts222 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.