JSFiddle - React, Tailwind, and code Playground

HTML

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. And then she said: <char-hang>“</char-hang>Corporis eligendi a pariatur illum provident incidunt maxime, laborum animi adipisci fugit culpa libero ipsam aliquam necessitatibus, molestiae voluptatem at quasi ratione!”
</p>

CSS

char-hang {
  display: contents;
  text-shadow: -.45em 0 black;
  letter-spacing: -1em;
  color: transparent;
}

char-hang::before {
  content: "";
  padding-left: .45em;
}

JavaScript

/* class CharHangElement extends HTMLSpanElement {
  connectedCallback() {
    const shadow = this.attachShadow({ mode: "open" });
    this.style.display = "contents";
  
    const pull = document.createElement("span");
    pull.textContent = this.textContent;
    shadow.appendChild(pull);

    const push = document.createElement("span");
    pull.before(push);

    const offsetWidthEm = pull.offsetWidth / parseFloat(
      getComputedStyle(pull).fontSize
    );
    pull.style.marginInlineStart = `-${offsetWidthEm}em`;
    push.style.marginInlineEnd = `${offsetWidthEm}em`;
  }
}

customElements.define("char-hang", CharHangElement, { extends: "span" });
 */