---
title: "Vertically aligning CSS :before and :after content"  
description: "Vertically aligning CSS :before and :after content"  
author: "Revati S Misra"  
published: 2023-04-24  
updated: 2023-04-25  
canonical: https://www.mindstick.com/forum/157998/vertically-aligning-css-before-and-after-content  
category: "css-css3"  
tags: ["html", "css", "css selector"]  
reading_time: 1 minute  

---

# Vertically aligning CSS :before and :after content

Vertically aligning [CSS](https://www.mindstick.com/forum/514/background-gradient-ie7-css-problem) :before and :after [content](https://www.mindstick.com/articles/13019/get-the-best-content-marketing-pricing-packages-for-your-brand)

## Replies

### Reply by Aryan Kumar

To vertically align **:before** and **:after** pseudo-elements, you can use the **vertical-align** property. Here's an example:

css:

```css
div:before {
 content: "Before";
 display: inline-block;
 vertical-align: middle;
}
div:after {
 content: "After";
 display: inline-block;
 vertical-align: middle;
}
```

In this example, we're using the **:before** and **:after** pseudo-elements to add some content before and after the **div** element. We're setting the **content** property to some text and the **display** property to **inline-block** so that the pseudo-elements behave like inline elements and can be vertically aligned using **vertical-align**.

By setting **vertical-align: middle;**, we can center the pseudo-elements vertically within the **div** element. You can adjust the value of **vertical-align** to achieve the desired vertical alignment. Other possible values for **vertical-align** include **top**, **bottom**, **baseline**, and numeric values such as **50%**.

Note that **vertical-align** only works on inline-level and table-cell elements, so you may need to adjust the **display** property of the element to make it work properly.

\


---

Original Source: https://www.mindstick.com/forum/157998/vertically-aligning-css-before-and-after-content

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.