Styled quotation mark works in browser – except in chrome. Why?

Hi there, maybe somebody knows where I have an error 🙂

I styled the quotation mark by hiding standard mark and styling first letter.
This works in Firefox, Safari … but not in Chrome. And I don't get it.
Thank you in Advance

This is my code:

https://echidna-flugelhorn-5ybf.squarespace.com/projekte/brand-marketing-mpu-profi

// Quotations
  //Delete Quotations Marks
.sqs-block-quote span:first-child {
 display : none;  }
.sqs-block-quote span:last-child {
  display : none;  }

// 1. Letter Styling 
blockquote::first-letter {
  color: #F8D03F !important; 
  font-size: 5em !important;
  padding: 0.3em 0.05em 0.1em !important;
  margin: 0em 0.2em 0em -0.2em !important;
  float: left !important; }

this is it right looking in safari:

and this in chrome:

@creedon Could you give it a look?

Display none doesn't remove the element, it's still there, just not showing. In your case, first-letter is styling the quotation mark in the <span>. But, Firefox (sounds like safari also) treats certain characters as letters. In your case the quotation in the span is the first-letter. A bug perhaps? But any characters around the first real letter is being treated as part of the first-letter selection, so it's just lucky that it worked on Firefox (and safari).

Not sure what's the best solution. Let's see... or someone else might be able to help.

Edit: assuming there is no built-in option to use your own quotation mark in the block?

Could you just use a regular text block? 

@creedon

Wow, wow, wow! Again, you had the magic knowledge that solved my problem. And by the way I learned about CCS 🙂 Thank you very much for your unconditional helpfulness!

I am very grateful that you gave me your attention again in this community.

@melody495 Thank you also, for your time and practical idea!

@Matt-W-Urst you're welcome! Learnt a new syntax 🙂