css-pseudo-elements css-pseudo-elements

by Anonymous

What are pseudo-elements ?

It allows us to insert content on the page without writing all the HMTL for it. We can insert all the content with CSS but that content is not actually a DOM element.

They are commonly used to add additional changes/visuals to the page.

Example:

<p>Hi there</p>
p {
  position: relative;
  text-align: center;
}
p:before {
  background: #c678dd;
  content: "👇 - I am before";
  display: block;
  margin-bottom: 10px;
}
p:after {
  background: #b6dd78;
  content: "👆 - I am after";
  display: block;
  margin-top: 10px;
}

Output

Example:

<ul>
  <li>line 1</li>
  <li>line 2</li>
  <li>line 3</li>
  <li>line 4</li>
  <li>line 5</li>
</ul>
li {
  list-style-type: none;
  padding: 6px 0;
}
li:before {
  font-size: 90%;
  padding: 0px 5px 0px 0px;
  position: relative;
  bottom: 1px;
  color: #c678dd;
  content: "⦿ ";
}

Output

← Back