How can I toggle or hide CSS pseudo-elements on event (e.g., click)?

Question

Background

I have an HTML div which contains a ‘tooltip’-like feature (i.e., a text box pops up when a certain element is clicked or hovered over); this tooltip has decorative pseudo-elements to make it look like a ‘speech bubble,’ added in css as :before and :after .

I have a JS script, which is intended to show and hide the tooltip and decoration, in response to click events (i.e., toggle them between ‘show’ and ‘hide’ states).

Problem

I can’t get the decorative pseudo-elements to hide when the tooltip is hidden; as pseudo-elements, they are not part of the DOM and so I can’t use normal selectors to manipulate them.

When the tooltip is hidden on click, the decorative pseudo-elements persist, which is not a usable result.

I can’t do away with the decorative elements, they are part of the work specification.

Approach tried so far

Based on this question, my thought was to add an empty span with its own class, to which I’d prepend and append these pseudo-elements. Then, add or remove the class on click based on whether it exists already, or not.

I have also tried setting the class to which the pseudo-elements are pre/appended to display:none on click, but this also seems not to work

However, I cannot convince the pseudo-elements to hide on click. I’ve included a screenshot of what these remnant pseudo-elements look like in the live environment.

Note: I tried to work up a running simulation for the purpose of this question, but I wasn’t able to and the original css file is massive; the code included below is for reference only.

All guidance is much appreciated!

const barContainer = document.querySelector(".bar-container");
const decorationElement = document.querySelector("#decoration");

document.addEventListener('click', function(event) {
  console.log('click event listener triggered');
  if (event.target.closest('.link') || event.target.classList.contains('link')) {
    if (barContainer.classList.contains('open')) {
      barContainer.classList.remove('open')
      decorationElement.classList.remove('decoration')
      document.querySelector('.tooltip-container').setAttribute('style', 'display:none');
    } else {
      barContainer.classList.add('open')
      decorationElement.classList.add('decoration')
      document.querySelector('.tooltip-container').setAttribute('style', 'display:block');
    }

  } else {
    barContainer.classList.remove('open')
    decorationElement.classList.remove('decoration')
    document.querySelector('.tooltip-container').setAttribute('style', 'display:none');
  }
});

.foo-container {
  height: auto;
  position: relative;
}

.bar-container {
  height: auto;
  position: relative;
  text-align: center;
}

.bar-container:hover .tooltip-container,
.tooltip-container:hover,
.bar-container.open .tooltip-container {
  position: absolute;
  display: block;
  text-align: left;
  background-color: #ffffff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  bottom: 50px;
  right: 5%;
  border-radius: 4%;
  font-weight: 300;
  max-width: 90%;
  font-size: 14px;
  padding: 20px 0;
}


/*the below two rule sets create the rotated 'decoration' */

.bar-container:hover .tooltip-container:before,
.tooltip-container:hover:before,
.bar-container.open .tooltip-container:before,
.foo-container .bar-container:hover .decoration:before {
  content: "";
  width: 65px;
  height: 35px;
  position: absolute;
  overflow: hidden;
  transform: rotate(-180deg);
  z-index: 10;
  bottom: 0;
  left: 170px;
  background-color: white;
}

.foo-container .bar-container.open .decoration:before,
.foo-container .bar-container:hover .decoration:before {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  background: #fff;
  transform: rotate(45deg);
  left: 30px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  z-index: 2;
  top: -42px;
}


/* end 'deocration' */

<div class="foo-container">
  <div class="bar-container">
    <p>text <span class='link'>the-link<span id='decoration' class='decoration'></span></span>
    </p>
    <div class='tooltip-container'>
      <p>lorem </p>
    </div>
  </div>
</div>

Screenshot of the undesirable 'persistent pseudo-elements' behavior -->