Random en dashes appearing on top of each team profile pic (after using code to change all bullet points to dash lists)

I have an issue of random en dashes appearing on top of each team member profile pic. This issue occured after I added custom CSS code for changing bullet lists to dashed lists instead. I have pasted the following code in custom css of my site:

/* change the bullet point symbol to a unicode character */
li>*:first-child::before{content:"—"!important;color:#000000}

/* move bullet list to left */
ul {
  padding-left: 1.5rem
}

I am happy with how the dashed bullet list looks but random dashes appear on top of each team member profile of the website. I have dashed lists looking perfect where they're needed on various pages of the website. The team profiles page does not include any bullet lists.

Can anyone help me fix this issue? Help would be greatly appreciated.

Unordered Lists (<ul>) get used for more than just bullet points, the list section that you are using for the Team photos is one of those, so with your style code targeting all <ul> and <li> it will impact more than you want. You probably want to target it just to paragraph text, which is usually achieved by adding an additional ID of p to your code. I can't tell exactly what you need as I would need to see your website for that.

Cheers for looking into this Ziggy. Here's the site https://olive-glockenspiel-gbhp.squarespace.com and the preview password is Scarysolicitors1234

Hopefully it's a simple fix. I'm happy to have some target set up that only the Meet the Team page doesn't use the dashed bullet list styling.

BTW it looks like you have "display source code" checked on this code block which is displaying the code as text rather than rendering it as you'd want.

That has fixed the issue – thank you so much! What line of code shall I insert below the color line if I wanted to have the dashed list aligned to the left with the text above?

Thanks for the shout about the Solicitors Regulation Authority logo for the footer of website!

Try this:

ul[data-rte-list] li>*:first-child::before {
    margin-left: -55px;
}