Hiding comma between tags on a blog summary

How do I target/hide/remove the "," between tags on a grid summary block in 7.1? I've successfully edited the tags themselves with 

.summary-metadata-item--tags a{
    color:#3b5ed8!important;
    background:#ced7f5!important;
  }

But can't figure out how to target that pesky comma!

(site is under NDA, cannot link to)

This feels wrong to do, but this javascript should remove it.  Add it to your code injection under settings -> advanced for the page you want to change.

<script>
window.onload = function(){
  var tags = document.getElementsByClassName('summary-metadata-item--tags');
  for(i=0;i<tags.length;i++)
    tags[i].innerHTML = tags[i].innerHTML.replace(/\,/g,'');
}
</script>

That achieves the desired result, thanks!

Is there no way to do it with just CSS? I don't know javascript at all so I don't understand what that script actually does.

6 hours ago, Kmcgrath said:

That achieves the desired result, thanks!

Is there no way to do it with just CSS? I don't know javascript at all so I don't understand what that script actually does.

There isn't. CSS allows you to only do some basic text manipulation, typically adding things before or after.

The script does the following:

• Waits for the document to load.
• Searches for all the elements that have the class 'summary-metadata-item--tags'.
• Loops through each of these elements
• Replaces every occurrence of a comma (,) with an empty string ('') in the element.

It's not really an elegant solution, but since you can't change the underlying HTML, it's the only solution at the moment.

Interesting, thanks! I had been envisioning something like make the comma opacity 0, but this is cooler!

Thanks this worked for me removing the comma from Blog Post MetaData Categories! Just had to replace the Element Class Name!

Exactly what would I put to REPLACE the comma with a pipe?

I needed to hide the comma between tags in a summary block and found this CSS code online, which worked great for me.

.sqs-block-summary-v2 .summary-metadata-item.summary-metadata-item--tags {
font-size: 0;
}

Quick and simple workaround:

.summary-metadata-item--cats {
  color:transparent; 
}

I'm not sure you need javascript here. And I'm not sure why making your cats transparent helps, @ALHAUS. (You're just making your cats disappear, not the comma.) You can actually target the non-linked text, i.e. the comma, in that span with this CSS. The second bit is just making sure your cat doesn't disappear. You just need to fill in your initial color there. Mine is #00bac0.

.summary-metadata-item:not(a) {
color: transparent !important;
}

.summary-metadata-item a {
color: #00bac0 !important;
}