Adding Content To Your Page With CSS

So, there is no strange case that sometimes we find ourselves making code to create filler content on our pages (like static footer text, counters, description text) and while we make tweaks or create separate functions to generate them. We can save us a little bit of time and code with a little help of our good old friend CSS.

Yeah CSS apart from its uses to style our pages and cause pain on out front end friends, it can also be use to fill some of elements with content, so we can avoid making extra steps on our code.

The ::before and ::after pseudo elements

We will using the ::before and ::after pseudo elements to help us with this task. As we know they serve as the firts (::before) and last (::last) child of the selected element, mainly used for cosmetic purpuses and to add content with the css property content.

A little example:

/*css*/
p {
  font-weight: normal;
}

p::before {
  font-weight: bold;
  content: " Start ";
}

p::after {
  font-weight: bold;
  content: " Finish";
}

<!-html->

<p>
A super serius paragraph 
</p>

result:

Now we have an idea of how this little elements will help us when creating our pages. The content property can save us some lines of code and focus so the only concern will be to render the elements without tweaking to add some filler content.

To obtain the most possible help out this elements, we have to know what can be used with the content property:

Strings

The most basic value we can insert to content is string, simple and enviroment friendly text. As shown in the previous example, we can fill the ::before and ::after pseudo elements with text to display it at the start or end of the element.

ASCII Entities and Symbols

You can add the inmense variety of ASCII entities and Symbols directly from CSS, saving us from adding third party icon libraries on rather small projects or showing icons that are not present on said libraries.

we can have a look of the avalianle entities on this list: ASCII Entities and Symbols

An example:

.copyrigth::before {
  content: "\00A9";
  margin-right: 2px;
}

.trademark::before {
  content: "\2122";
  margin-right: 2px;
}

<label class="copyrigth">Gonna copy strike you boy</label>
 <label class="trademark">Horchata</label>

You can also add more content besides the entity code

.callmemaybe::after {
  content: "\260F   maybe";
  margin-left: 2px;
}

<label class="callmemaybe">So here's my number so</label>

emojis?

Yes.

.emoji::before{
content: '\1F600';
}

Adding content by attribute

Another great use of content is that we can show the value that an elemnent's attribute holds, by using the syntaxt "attr()" we can especify which attribute value we want to display.

For example: We want to show where this misterious link will take us, we can add a description by specifying that the values we want to show is from the href attribute

.anchorDescription::after {
  content: " (" attr(href) ")";
}

 <a
      class="anchorDescription"
      href="https://developer.mozilla.org/es/docs/Web/CSS/content"
      >Cool site</a
    >

we can basically specify any other attribute of the html elements

.userID::after {
  content: attr(id);
}

<label id="1" class="userID">Luis Miguel is the user </label>

Also properties that are used for handling actions:

.anchorFunction::after {
  content: attr(onclick);
}

<a class="anchorFunction" href="#" onclick="consoleThisLog()"
      >This is calling
    </a>

Can I add media with content?

Ofcourse you can, use the url() to specify the media you want to show.

.backgroundContent {
  content: url("https://picsum.photos/id/1025/200");
  height: 200px;
  width: 300px;
}

<div class="backgroundContent"></div>

You can also show a counter!

When we render a list of elements sometimes we want to show on them which number of the list the item represents. Commonly we use the index of the element (by setting a counter on our loop or using the current index) to show the what number each element is. With css we can save us some lines of code by using the attributes counter-increment and the css function counter().

With counter-increment we set a named counter that will be use on the counter() function, for example:

.counter{
  counter-increment: pCounter;
}

.counter::before {
  content: counter(pCounter);
  margin-right: 5px;
}

 <label class="counter">Some deep phrases</label>
 <label class="counter">Some not so deep phrases</label>
 <label class="counter">Some really deep phrases</label>

If you want to set the increment step you can pass the number after the counter name.

/*counter begins at 0 but will not increment*/
.counter{
  counter-increment: pCounter 0;
}

/*counter begins at 3 and increment3 by 3*/
.counter{
  counter-increment: pCounter 3;
}

/*counter begins at -1 decreases by 1*/
.counter{
  counter-increment: pCounter -1;
}

.counter::before {
  content: counter(pCounter);
  margin-right: 5px;
}