After

Arguments

NameTypeDescription
$contentstring

You can pass a content as a string or fetch the given value using custom property like data-content.

* When you want to fetch a given value by using custom property the name of the property must start with ‘data-’ prefix. For more please see the examples.

Examples

Simply pass a value as a string.

.element{
  @include after("Text to use!");
}
//CSS Output
.element::after {
  content: "Text to use!";
}

You can only target the ::after pseudo-element and then pass a decleration block.

.element{
  @include after{
    content: "Easy to use!";
    font-style: italic;
    color: red;
  };
}
//CSS Output
.element::after {
  content: "Easy to use!";
  font-style: italic;
  color: red;
}

You can fetch a given value by using custom property. One thing important to remember here is the name of the property must start with ‘data-’ prefix.

<div class="element" data-currency="TL">200</div>
.element{
  @include after("data-currency");
}
//CSS Output
.element::after {
  content: attr(data-currency);
}

You can pass a value for CSS content property as a string and a decleration block between the opening and closing curly braces.

.element{
  @include after("data-currency"){
    font-size: .8em;
    color: red;
  };
}
//CSS Output
.element::after {
  content: attr(data-currency);
  font-size: .8em;
  color: red;
}