diff --git a/packages/rich-text-editor/src/vaadin-rich-text-editor-mixin.js b/packages/rich-text-editor/src/vaadin-rich-text-editor-mixin.js
index 0fe244a285..f2a84c0485 100644
--- a/packages/rich-text-editor/src/vaadin-rich-text-editor-mixin.js
+++ b/packages/rich-text-editor/src/vaadin-rich-text-editor-mixin.js
@@ -681,7 +681,7 @@ export const RichTextEditorMixin = (superClass) =>
         return `class="${classes.join(' ')}"`;
       });
       // Remove meta spans, e.g. cursor which are empty after Quill classes removed
-      content = content.replace(/<\/?span[^>]*>/gu, '');
+      content = content.replace(/<span[^>]*><\/span>/gu, '');
 
       // Replace Quill align classes with inline styles
       [this.__dir === 'rtl' ? 'left' : 'right', 'center', 'justify'].forEach((align) => {
diff --git a/packages/rich-text-editor/test/basic.common.js b/packages/rich-text-editor/test/basic.common.js
index cc76b36878..5aadd800a5 100644
--- a/packages/rich-text-editor/test/basic.common.js
+++ b/packages/rich-text-editor/test/basic.common.js
@@ -753,6 +753,12 @@ describe('rich text editor', () => {
       expect(rte.htmlValue).to.equal('<p><strong>Hello </strong></p><p><strong>world</strong></p>');
     });
 
+    it('should not filter out span elements with style from the resulting htmlValue', () => {
+      setValueAndFormatText('color', '#e60000');
+      // Empty span should be stripped
+      expect(rte.htmlValue).to.equal('<p><span style="color: rgb(230, 0, 0);">Foo</span></p>');
+    });
+
     it('should not lose leading tab characters from the resulting htmlValue', () => {
       const htmlWithLeadingTab = '<p>\tTab</p>';
       rte.dangerouslySetHtmlValue(htmlWithLeadingTab);