A Quick Note On CSS Pseudo Elements
Tags: css, codenewbie, webdev, beginners
Published: 2021-12-13 09:19:29

CSS pseudo-elements creates a new virtual element that represents a part of the element which can be manipulated like regular elements with some limitations. Pseudo-elements are only visible to users, they are not available in the document element tree i.e. they are not real elements. Pseudo-elements are mainly used to style specific parts of an element to which the pseudo-element is attached. Double colon is prepended before the pseudo-element to distinguish it from pseudo-class, but for backward compatibility we can also use single colon. Commonly used CSS pseudo-elements are:

1. **::after**
2. **::before**
3. **::first-letter** 
4. **::first-line**
5. **::marker**
6. **::placeholder**
7. **::selection**
8. **::backdrop**

```css
/* Basic Syntax */

selector::pseudo-element{
    property: value;
}
```
---

### ::after & ::before 
::after / ::before creates a child element inside a element to which the pseudo class is attached. You must specify the content property of ::after / ::before to make the pseudo element to be visible, the content property can be an empty string. Both before and after pseudo-element has default display value of inline. In the “after” pseudo element the “content” created by the pseudo element is inserted after the main element, for "before" pseudo element the content is insert before the main element.

Check the below example, the black circle is created using before and after pseudo elements.

![Before and After Pseudo Element Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/flp91psaplocqzqr6bh9.JPG)

```css

.para {
  position: relative;
  background: #aaa;
  padding: 20px;
}

.para::before {
  content: "";
  width: 50px;
  height: 50px;
  border-radius: 50px;
  background: #000;
  position: absolute;
  left: -50px;
  top: -50px;
}

.para::after {
  content: "";
  width: 50px;
  height: 50px;
  border-radius: 50px;
  background: #000;
  position: absolute;
  right: -50px;
  bottom: -50px;
}

```

[Example on Codepen](https://codepen.io/kiran-r-raj/pen/abLdYLM)

---

### ::first-letter
First-letter pseudo element can be used to style the first letter of the first line, without using any extra html tags. For the first-letter pseudo element to work as expected the element should be of type `display: block;`, and the first letter should not be preceded by any other contents, for example images. Not all properties as supported by first-letter pseudo element, a limited set of font properties, margin property, padding property, border property and some background properties support first-letter pseudo element.

![First Letter Pseudo Element Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ioucjav3k5r6welh45g2.JPG)

```css

.para::first-letter{
  color:#fff;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 30px;
  background: #000;
  padding: 5px 10px;
  margin-right: 5px;
}
```
---

### ::first-line
First line pseudo element is used to style the first line of a text in a block element. First-line pseudo element supports font, color, text and background properties only.


![First Line Pseudo Element Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zmepuvgw1mve7q2zlfw1.JPG)

```css

.para::first-line{
  color:red;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 20px;
}

```
[Example on Codepen](https://codepen.io/kiran-r-raj/pen/wvrGBEE)

---

### ::marker
Marker pseudo element helps to style the marker box of any element whose display property is set to `list-item`, it also helps to style the arrow of the summary elements. Marker pseudo element mainly supports color property and font properties. 


![Marker Pseudo Element Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uukmzj7ixboe8plp2s2c.JPG)

```css

<ul class="list">
  <li class="item">One</li>
  <li class="item">Two</li>
  <li class="item">Three</li>
  <li class="item">Four</li>
</ul>


.item::marker {
  color: lime;
  font-size: 25px;
}
```
[Example on Codepen](https://codepen.io/kiran-r-raj/pen/QWqNWJa)

---

### ::placeholder
Placeholder pseudo element helps to style the placeholder attributes of html input tags.


![Placeholder Pseudo Element Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/02742jihfqcn8vfsha7a.JPG)  

```css
.text1::placeholder {
  font-size: 18px;
  padding-left: 20px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #f00;
  text-decoration: underline;
}
```
[Example on Codepen](https://codepen.io/kiran-r-raj/pen/oNGxgGY)

---

### ::selection
Selection pseudo element helps to style text selected / highlighted by the user. Few properties like text shadow, background color and color properties are supported.


![Selection Pseudo Element Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nk7nv0569x43z84tu8x3.JPG)


```css
.para::selection{
  color:#fff;
  background: #f00;
}
```
[Example on Codepen](https://codepen.io/kiran-r-raj/pen/MWEyYKL)

---

### ::backdrop  
Helps to style the backdrop area of video / dialog html 
elements when viewed in full screen mode.

```css
.video::backdrop {
  background: yellow;
  color: black;
}
```
---

[Example on Codepen.io](https://codepen.io/kiran-r-raj/pen/abygvzE)