diff --git a/core/src/components/item/item.ionic.scss b/core/src/components/item/item.ionic.scss
index 3b33c393e5..b583dd24c4 100644
--- a/core/src/components/item/item.ionic.scss
+++ b/core/src/components/item/item.ionic.scss
@@ -113,3 +113,17 @@
 :host(.ion-activated) .item-native {
   background: var(--background-activated);
 }
+
+// Item: Focused
+// --------------------------------------------------
+:host(.ion-focused) .item-native::after {
+  @include globals.position(0, 0, 0, 0);
+
+  position: absolute;
+
+  border-width: globals.$ionic-border-size-050;
+  border-style: globals.$ionic-border-style-solid;
+  border-color: globals.$ionic-state-focus-1;
+
+  content: "";
+}
diff --git a/core/src/components/item/test/states/item.e2e.ts b/core/src/components/item/test/states/item.e2e.ts
index 0989ba971d..d1602bc767 100644
--- a/core/src/components/item/test/states/item.e2e.ts
+++ b/core/src/components/item/test/states/item.e2e.ts
@@ -4,7 +4,7 @@ import { configs, test } from '@utils/test/playwright';
 /**
  * This behavior does not vary across directions
  */
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ionic-md', 'ios', 'md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('item: states'), () => {
     test('should not have visual regressions', async ({ page }) => {
       await page.goto(`/src/components/item/test/states`, config);
diff --git a/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..40ee2a5c9e
Binary files /dev/null and b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..e0b1d21ec8
Binary files /dev/null and b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..19be395cf5
Binary files /dev/null and b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/theme-ionic/index.html b/core/src/components/item/test/theme-ionic/index.html
index a9f3b5c77a..0e443dbf88 100644
--- a/core/src/components/item/test/theme-ionic/index.html
+++ b/core/src/components/item/test/theme-ionic/index.html
@@ -170,6 +170,16 @@
             <p>Normal paragraph</p>
           </ion-label>
         </ion-item>
+        <ion-item-divider>
+          <ion-label>Item focused</ion-label>
+        </ion-item-divider>
+        <ion-item href="#" class="ion-focused">
+          <ion-label slot="start">Start</ion-label>
+          <ion-label>
+            <h1>Heading</h1>
+            <p>Normal paragraph</p>
+          </ion-label>
+        </ion-item>
       </ion-content>
 
       <ion-footer>