diff --git a/addons/web_editor/static/src/js/editor/rte.summernote.js b/addons/web_editor/static/src/js/editor/rte.summernote.js
index b99c9781446..96f73267244 100644
--- a/addons/web_editor/static/src/js/editor/rte.summernote.js
+++ b/addons/web_editor/static/src/js/editor/rte.summernote.js
@@ -245,8 +245,8 @@ eventHandler.modules.popover.button.update = function ($container, oStyle) {
         $(oStyle.image).addClass('o_we_selected_image');
 
         if (dom.isImgFont(oStyle.image)) {
-            $container.find('.note-fore-color-preview > button').css('border-bottom-color', $(oStyle.image).css('color'));
-            $container.find('.note-back-color-preview > button').css('border-bottom-color', $(oStyle.image).css('background-color'));
+            $container.find('.note-fore-color-preview > button > .caret').css('border-bottom-color', $(oStyle.image).css('color'));
+            $container.find('.note-back-color-preview > button > .caret').css('border-bottom-color', $(oStyle.image).css('background-color'));
 
             $container.find('.btn-group:not(.only_fa):has(button[data-event="resize"],button[data-value="img-thumbnail"])').addClass('d-none');
             $container.find('.only_fa').removeClass('d-none');
@@ -287,8 +287,8 @@ eventHandler.modules.popover.button.update = function ($container, oStyle) {
 
         $(oStyle.image).trigger('attributes_change');
     } else {
-        $container.find('.note-fore-color-preview > button').css('border-bottom-color', oStyle.color);
-        $container.find('.note-back-color-preview > button').css('border-bottom-color', oStyle['background-color']);
+        $container.find('.note-fore-color-preview > button > .caret').css('border-bottom-color', oStyle.color);
+        $container.find('.note-back-color-preview > button > .caret').css('border-bottom-color', oStyle['background-color']);
     }
 };
 
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index e73da07afbf..f432de9c9f6 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -96,8 +96,16 @@ body.editor_enable.editor_has_snippets {
             .note-back-color-preview {
                 margin-left: $-text-tools-gap;
             }
-            .btn:after {
-                display: none;
+            .btn {
+
+                > .caret {
+                    display: block;
+                    @include o-position-absolute(auto, 0, 0, 0);
+                    border-bottom: 2px solid transparent;
+                }
+                &::after {
+                    display: none;
+                }
             }
         }
         &.note-style {