diff --git a/core/src/components/item-options/item-options.scss b/core/src/components/item-options/item-options.scss
index 50774c6856..c35b53fddb 100644
--- a/core/src/components/item-options/item-options.scss
+++ b/core/src/components/item-options/item-options.scss
@@ -56,15 +56,17 @@ ion-item-options {
   }
 }
 
-.item-options-start ion-item-option:first-child {
-  @include padding-horizontal(null, var(--ion-safe-area-left));
-
+/* stylelint-disable property-disallowed-list */
+[dir="ltr"] .item-options-start ion-item-option:first-child,
+[dir="rtl"] .item-options-start ion-item-option:last-child {
+  padding-left: var(--ion-safe-area-left);
 }
 
-.item-options-end ion-item-option:last-child {
-  @include padding-horizontal(null, var(--ion-safe-area-right));
-
+[dir="ltr"] .item-options-end ion-item-option:last-child,
+[dir="rtl"] .item-options-end ion-item-option:first-child {
+  padding-right: var(--ion-safe-area-right);
 }
+/* stylelint-enable property-disallowed-list */
 
 .item-sliding-active-slide {
   @include rtl() {
diff --git a/core/src/components/item-options/item-options.tsx b/core/src/components/item-options/item-options.tsx
index 3b17a78fce..d495580d7a 100644
--- a/core/src/components/item-options/item-options.tsx
+++ b/core/src/components/item-options/item-options.tsx
@@ -45,6 +45,14 @@ export class ItemOptions implements ComponentInterface {
           // Used internally for styling
           [`item-options-${mode}`]: true,
 
+          /**
+           * Note: The "start" and "end" terms refer to the
+           * direction ion-item-option instances within ion-item-options flow.
+           * They do not refer to how ion-item-options flows within ion-item-sliding.
+           * As a result, "item-options-start" means the ion-item-options container
+           * always appears on the left, and "item-options-end" means the ion-item-options
+           * container always appears on the right.
+           */
           'item-options-start': !isEnd,
           'item-options-end': isEnd,
         }}