JSFiddle - React, Tailwind, and code Playground

HTML

<span class="ribbon">Notice where the orange box is.</span>
<br/>

CSS

.ribbon {
  background-color: #5BC8F7;
}

.ribbon::after {
  content: "Look at this orange box.";
  background-color: #FFBA10;
  border-color: black;
  border-style: dotted;
}

.ribbon::after {
  content: "Look at this orange box.";
  background-color: #FFBA10;
  border-color: black;
  border-style: dotted;
}

.ribbon:hover::after {
  content: "Look at this orange box.";
  background-color: red;
  border-color: black;
  border-style: dotted;
}