JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
<head>
<style>
span:hover
{
  font-size: 50px;
}
span:after
{
  content:"";
  padding: 0 0.3em;
  margin-left: 8px;
  display: inline;
  vertical-align: 1px;

-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 32'%3E%3Cpath d='M26.286 17.143q0 .964-.661 1.625L14 30.393q-.696.661-1.625.661-.911 0-1.607-.661l-1.339-1.339q-.679-.679-.679-1.625t.679-1.625l5.232-5.232H2.09q-.929 0-1.509-.67t-.58-1.616V16q0-.946.58-1.616t1.509-.67h12.571l-5.232-5.25q-.679-.643-.679-1.607t.679-1.607l1.339-1.339q.679-.679 1.607-.679.946 0 1.625.679l11.625 11.625q.661.625.661 1.607z'/%3E%3C/svg%3E");
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  background: currentColor;
}
span.fix-1:after
{
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 32'%3E%3Cpath d='M26.286 17.143q0 .964-.661 1.625L14 30.393q-.696.661-1.625.661-.911 0-1.607-.661l-1.339-1.339q-.679-.679-.679-1.625t.679-1.625l5.232-5.232H2.09q-.929 0-1.509-.67t-.58-1.616V16q0-.946.58-1.616t1.509-.67h12.571l-5.232-5.25q-.679-.643-.679-1.607t.679-1.607l1.339-1.339q.679-.679 1.607-.679.946 0 1.625.679l11.625 11.625q.661.625.661 1.607z'/%3E%3C/svg%3E"), 
    linear-gradient(transparent, transparent);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;

}
span.fix-2:after
{
/* Works in Safari, but looks cut off in Chrome */
-webkit-mask-size: 0.6em 2em;
}
</style>
</head>

<body>
<p>
<span class="bug">Some Text Safari Bug</span>
</p><p>
<span class="fix-1">Some Text Safari Fix 1</span>
</p><p>
<span class="fix-2">Some Text Safari Fix 2</span>
</p>
</body>
</html>