how to turn off text underline on ::after elements using css

I have a list of links. These are just tags sitting next to each other. I want a decorative element between them, and have the following CSS:

    a:not(:last-of-type)::after {
      content: '⬩';
      text-decoration: none;
      color: var(--text);
      margin: 0 .25rem;
    }

I do not want the decorative item to have an underline, but I want the hyperlink text to have an underline.

I have tried:
text-decoration: none !important; -> nothing.
text-decoration-line: none !important; -> doesn't change it.
text-decoration-color: transparent; -> no change.
text-decoration-line: none; -> still no change.

Is it possible to change the underline of a pseudo-element?

I recommend adding 'display: inline-block' to your CSS to prevent the pseudo-element from inheriting the underline style from the <a> tag.

Here's the updated code:

a:not(:last-of-type)::after {
  content: '⬩';
  text-decoration: none;
  display: inline-block;
  /* fix */
  color: var(--text);
  margin: 0 .25rem;
}

<nav>
  <a href="#">Preference</a>
  <a href="#">User Settings</a>
  <a href="#">Privacy</a>
</nav>