diff --git a/components/checkbox/style/index.tsx b/components/checkbox/style/index.tsx
index 9d620f55c1..37f85192f9 100644
--- a/components/checkbox/style/index.tsx
+++ b/components/checkbox/style/index.tsx
@@ -183,6 +183,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = token => {
         [`${checkboxCls}-inner`]: {
           backgroundColor: token.colorPrimary,
           borderColor: token.colorPrimary,
+          zIndex: 2,
 
           '&:after': {
             opacity: 1,
@@ -194,6 +195,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = token => {
         // Checked Effect
         '&:after': {
           position: 'absolute',
+          zIndex: 1,
           top: 0,
           insetInlineStart: 0,
           width: '100%',
diff --git a/components/style/index.tsx b/components/style/index.tsx
index dcf691bf5f..50f11a7ae5 100644
--- a/components/style/index.tsx
+++ b/components/style/index.tsx
@@ -108,8 +108,16 @@ export const genCommonStyle = (token: DerivativeToken, rootPrefixCls: string): C
       fontSize,
       boxSizing: 'border-box',
 
+      '&::before, &::after': {
+        boxSizing: 'border-box',
+      },
+
       [rootPrefixSelector]: {
         boxSizing: 'border-box',
+
+        '&::before, &::after': {
+          boxSizing: 'border-box',
+        },
       },
     },
   };