diff --git a/addons/web_editor/static/lib/odoo-editor/demo/index.html b/addons/web_editor/static/lib/odoo-editor/demo/index.html
index 07080119b16..45e7dca3d26 100644
--- a/addons/web_editor/static/lib/odoo-editor/demo/index.html
+++ b/addons/web_editor/static/lib/odoo-editor/demo/index.html
@@ -16,6 +16,8 @@
 
         <!-- custom style -->
         <link rel="stylesheet" href="../src/style.css"/>
+        <!-- Checklists are styled separately in Odoo -->
+        <link rel="stylesheet" href="../src/checklist.css"/>
         <style>
             html, body {
                 width: 100%;
@@ -92,31 +94,6 @@
             .d-none {
                 display: none !important;
             }
-            /* Checklists are styled separately in Odoo */
-            ul.o_checklist > li {
-                list-style: none;
-                position: relative;
-                margin-left: 20px;
-            }
-            ul.o_checklist > li:not(.oe-nested):before {
-                content: '';
-                position: absolute;
-                left: -20px;
-                display: block;
-                height: 14px;
-                width: 14px;
-                top: 1px;
-                border: 1px solid;
-                cursor: pointer;
-            }
-            ul.o_checklist > li.o_checked:after {
-                content: "✓";
-                transition: opacity .5s;
-                position: absolute;
-                left: -18px;
-                top: -1px;
-                opacity: 1;
-            }
         </style>
 
         <script src="main.js" type="module" defer></script>
diff --git a/addons/web_editor/static/lib/odoo-editor/src/OdooEditor.js b/addons/web_editor/static/lib/odoo-editor/src/OdooEditor.js
index 41fe6e82f64..68a342a0e50 100644
--- a/addons/web_editor/static/lib/odoo-editor/src/OdooEditor.js
+++ b/addons/web_editor/static/lib/odoo-editor/src/OdooEditor.js
@@ -2674,7 +2674,21 @@ export class OdooEditor extends EventTarget {
         const node = ev.target;
         // handle checkbox lists
         if (node.tagName == 'LI' && getListMode(node.parentElement) == 'CL') {
-            if (ev.offsetX < 0) {
+            const beforStyle = window.getComputedStyle(node, 'before');
+            const style1 = {
+                left: parseInt(beforStyle.getPropertyValue('left'), 10),
+                top: parseInt(beforStyle.getPropertyValue('top'), 10),
+            }
+            style1.right = style1.left + parseInt(beforStyle.getPropertyValue('width'), 10);
+            style1.bottom = style1.top + parseInt(beforStyle.getPropertyValue('height'), 10);
+
+            const isMouseInsideCheckboxBox =
+                ev.offsetX >= style1.left &&
+                ev.offsetX <= style1.right &&
+                ev.offsetY >= style1.top &&
+                ev.offsetY <= style1.bottom;
+
+            if (isMouseInsideCheckboxBox) {
                 toggleClass(node, 'o_checked');
                 ev.preventDefault();
                 this.historyStep();
diff --git a/addons/web_editor/static/lib/odoo-editor/src/checklist.css b/addons/web_editor/static/lib/odoo-editor/src/checklist.css
new file mode 100644
index 00000000000..758fcc4f2cd
--- /dev/null
+++ b/addons/web_editor/static/lib/odoo-editor/src/checklist.css
@@ -0,0 +1,24 @@
+ul.o_checklist > li {
+    list-style: none;
+    position: relative;
+    margin-left: 20px;
+}
+ul.o_checklist > li:not(.oe-nested):before {
+    content: '';
+    position: absolute;
+    left: -20px;
+    display: block;
+    height: 14px;
+    width: 14px;
+    top: 1px;
+    border: 1px solid;
+    cursor: pointer;
+}
+ul.o_checklist > li.o_checked:after {
+    content: "✓";
+    transition: opacity .5s;
+    position: absolute;
+    left: -18px;
+    top: -1px;
+    opacity: 1;
+}
diff --git a/addons/web_editor/static/lib/odoo-editor/test/editor-test.html b/addons/web_editor/static/lib/odoo-editor/test/editor-test.html
index 939d0590209..1a63b04f083 100644
--- a/addons/web_editor/static/lib/odoo-editor/test/editor-test.html
+++ b/addons/web_editor/static/lib/odoo-editor/test/editor-test.html
@@ -7,6 +7,7 @@
 
         <title>Odoo Editor tests</title>
 
+        <link rel="stylesheet" href="../src/checklist.css"/>
         <link rel="stylesheet" href="lib/mocha.css" />
         <style type="text/css">
             b.zws {
diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss
index d04dada823f..d4de90c220f 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -135,18 +135,20 @@ ul.o_checklist {
             display: block;
             height: $o-checklist-before-size;
             width: $o-checklist-before-size;
-            margin-top: 4px;
+            top: 4px;
             border: 1px solid;
             text-align: center;
             cursor: pointer;
         }
         &.o_checked {
             text-decoration: line-through;
-            &::after {
+            &::before {
                 content: "✓";
-                position: absolute;
-                left: - ($o-checklist-margin-left - $o-checklist-checkmark-width);
-                top: +1px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                padding-left: 1px #{"/*rtl:ignore*/"};
+                padding-top: 1px;
             }
         }
     }