DEV Community

devneagu
devneagu

Posted on

2 1

[How to] add decorative content through CSS using pseudo-elements

The :before and :after pseudo-elements allow you to add content to an element, without actually adding any HTML markup to the document. This can be useful for adding decorative elements, such as icons or borders, to an element without having to add additional HTML elements.

Here is an example of how you can use the :before and :after pseudo-elements to add content to an element:

.my-element:before {
  content: '\f00c'; /* Add a font awesome icon */
  font-family: 'FontAwesome';
  position: absolute;
  top: 0;
  left: 0;
  color: #00b8d4;
}

.my-element:after {
  content: ''; /* Add a border */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid #00b8d4;
}
Enter fullscreen mode Exit fullscreen mode

In this example, the :before pseudo-element is used to add a font awesome icon to the .my-element element, and the :after pseudo-element is used to add a border around the element. The content property is used to specify the content that will be added by the pseudo-elements, and the other CSS properties are used to position and style the added content.

By using the :before and :after pseudo-elements, you can easily add content to an element without having to add additional HTML markup, and you can control the position and style of the added content using CSS.

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay