Colons after labels; any accessibility concerns?

I like having a colon after labels but for form-building components I like not having to specify them. Thus I have CSS like this:

label::after {
  content: ':';
}

This works fine, but my puppeteer scripts, which use aria selectors, are not finding inputs that are labeled like that due to the colon showing up in the accessible names. For example, given this:

<label for="first-name">First name</label><input id="first-name" type="text" />

The selector aria/First name fails to find the input.

I can add a : to the aria selector, but that's annoying, and I'm not sure if the colon ends up as noise to those using screen readers and this is misplaced worry or if there's a cleaner way to do this where the colon shows up for sighted readers but is invisible to screen readers.

Solution

I found a workaround while typing the question. Apparently alt text for content can be specified, so this works to show a ":" but render it invisible to the accessibility tree. The content property is repeated to catch browsers that don't support this syntax. This seems to be setting the accessible name of labeled inputs to not include the :.

label::after {
  content: ':';
  content: ':' / '';
}