Set content of a pseudo element dynamically in CSS

This will be a very quick post about a pretty cool thang I just figured out.

Let’s say you have <div> with a data property (f.ex. data-status). This status data property can be either one of these:

  • Todo
  • In progress
  • In review
  • Impeded
  • Done

You want to show this in top right corner of the div in a HOT way. You can do this:

div:before {
content: attr(data-status);
}

Pretty cool eh? Let’s do a full example:

Your html

<div class="status-div" data-status="Todo">Task 1</div>
<div class="status-div" data-status="In progress">Task 2</div>
<div class="status-div" data-status="In review">Task 3</div>
<div class="status-div" data-status="Done">Task 4</div>

Your CSS

.status-div:before {
 content: attr(data-status);
 position: absolute;
 top: 0;
 right: 0;
 background-color: #444;
 font-size: 10px;
 padding: 10px;
}
.status-div {
 width: 200px;
 height: 80px;
 background-color: #666;
 color: #fff;
 display: inline-block !important;
 vertical-align: top;
 position: relative;
 padding: 10px;
}

Result

Set content of a pseudo element dynamically in CSS

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s