<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/::after -->

<span class="ribbon">Look at the orange box after this text. </span>
.ribbon {
  background-color: #5BC8F7;
}

.ribbon::after {
  content: "This is a fancy orange box.";
  background-color: #FFBA10;
  border-color: black;
  border-style: dotted;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.