diff --git a/components/steps/demo/description-only.md b/components/steps/demo/description-only.md
new file mode 100644
index 00000000000..c6ae7ec0b1f
--- /dev/null
+++ b/components/steps/demo/description-only.md
@@ -0,0 +1,14 @@
+---
+order: 7
+title:
+  zh-CN: 仅描述
+  en-US: Description only
+---
+
+## zh-CN
+
+当不设置 `nzTitle` 时，仅展示描述。描述会固定显示在横线下方，不会与步骤条重叠。
+
+## en-US
+
+When `nzTitle` is not set, only the description is shown. The description always renders below the horizontal line and does not overlay the step bar.
diff --git a/components/steps/demo/description-only.ts b/components/steps/demo/description-only.ts
new file mode 100644
index 00000000000..f786909f1c9
--- /dev/null
+++ b/components/steps/demo/description-only.ts
@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+
+import { NzStepsModule } from 'ng-zorro-antd/steps';
+
+@Component({
+  selector: 'nz-demo-steps-description-only',
+  imports: [NzStepsModule],
+  template: `
+    <nz-steps [nzCurrent]="1">
+      <nz-step
+        nzDescription="This is a description only. The title row is reserved so the description stays below the horizontal line."
+      />
+      <nz-step nzTitle="In Progress" nzDescription="This step has both title and description." />
+      <nz-step nzDescription="Another step with description only. No title provided." />
+    </nz-steps>
+  `
+})
+export class NzDemoStepsDescriptionOnlyComponent {}
diff --git a/components/steps/doc/index.zh-CN.md b/components/steps/doc/index.zh-CN.md
index a90d142c416..b55f68948be 100755
--- a/components/steps/doc/index.zh-CN.md
+++ b/components/steps/doc/index.zh-CN.md
@@ -47,7 +47,7 @@ description: 引导用户按照流程完成任务的导航条。
 | `[nzDescription]` | 步骤的详情描述，可选                                                                                                 | `string \| TemplateRef<void>`                                                           | -        |
 | `[nzIcon]`        | 步骤图标的类型，可选                                                                                                 | `string \| string[] \| Set<string> \| { [klass: string]: any; }` \| `TemplateRef<void>` | -        |
 | `[nzStatus]`      | 指定状态。当不配置该属性时，会使用 `nz-steps` 的 `nzCurrent` 来自动指定状态。可选：`wait` `process` `finish` `error` | `'wait' \| 'process' \| 'finish' \| 'error'`                                            | `'wait'` |
-| `[nzTitle]`       | 标题                                                                                                                 | `string \| TemplateRef<void>`                                                           | -        |
+| `[nzTitle]`       | 标题（可选）。不设置时仅展示描述，描述会显示在横线下方                                                               | `string \| TemplateRef<void>`                                                           | -        |
 | `[nzSubtitle]`    | 子标题                                                                                                               | `string \| TemplateRef<void>`                                                           | -        |
 | `[nzDisabled]`    | 禁用点击                                                                                                             | `boolean`                                                                               | `false`  |
 | `[nzPercentage]`  | 当前状态为 `process` 的步骤所显示的进度条进度（只对基本类型的 `nz-steps` 生效）                                      | `number`                                                                                | -        |
diff --git a/components/steps/step.component.ts b/components/steps/step.component.ts
index 32352975303..f6e2200a429 100644
--- a/components/steps/step.component.ts
+++ b/components/steps/step.component.ts
@@ -36,13 +36,10 @@ import { NzProgressFormatter, NzProgressModule } from 'ng-zorro-antd/progress';
   template: `
     <div
       #itemContainer
-      class="ant-steps-item-container"
+      class="ant-steps-item-wrapper"
       [attr.role]="clickable && !nzDisabled ? 'button' : null"
       [tabindex]="clickable && !nzDisabled ? 0 : null"
     >
-      @if (!last) {
-        <div class="ant-steps-item-tail"></div>
-      }
       <div class="ant-steps-item-icon">
         @if (!showProcessDot) {
           @if (showProgress) {
@@ -91,16 +88,27 @@ import { NzProgressFormatter, NzProgressModule } from 'ng-zorro-antd/progress';
           </span>
         }
       </div>
-      <div class="ant-steps-item-content">
-        <div class="ant-steps-item-title">
-          <ng-container *nzStringTemplateOutlet="nzTitle">{{ nzTitle }}</ng-container>
+      <div class="ant-steps-item-section">
+        <div class="ant-steps-item-header">
+          <div class="ant-steps-item-title">
+            <ng-container *nzStringTemplateOutlet="nzTitle">{{ nzTitle || '&nbsp;' }}</ng-container>
+          </div>
           @if (nzSubtitle) {
-            <div class="ant-steps-item-subtitle">
+            <span class="ant-steps-item-subtitle">
               <ng-container *nzStringTemplateOutlet="nzSubtitle">{{ nzSubtitle }}</ng-container>
-            </div>
+            </span>
+          }
+          @if (!last) {
+            <div
+              class="ant-steps-item-rail"
+              [class.ant-steps-item-rail-wait]="nzStatus === 'wait'"
+              [class.ant-steps-item-rail-process]="nzStatus === 'process'"
+              [class.ant-steps-item-rail-finish]="nzStatus === 'finish'"
+              [class.ant-steps-item-rail-error]="nzStatus === 'error'"
+            ></div>
           }
         </div>
-        <div class="ant-steps-item-description">
+        <div class="ant-steps-item-content">
           <ng-container *nzStringTemplateOutlet="nzDescription">{{ nzDescription }}</ng-container>
         </div>
       </div>
diff --git a/components/steps/steps.spec.ts b/components/steps/steps.spec.ts
index 7a8b232bb4e..3daaf1cccb0 100644
--- a/components/steps/steps.spec.ts
+++ b/components/steps/steps.spec.ts
@@ -77,9 +77,9 @@ describe('steps', () => {
       fixture.detectChanges();
       tick();
       fixture.detectChanges();
-      expect(innerSteps[0].nativeElement.querySelector('.ant-steps-item-tail')).toBeTruthy();
-      expect(innerSteps[1].nativeElement.querySelector('.ant-steps-item-tail')).toBeTruthy();
-      expect(innerSteps[2].nativeElement.querySelector('.ant-steps-item-tail')).toBeFalsy();
+      expect(innerSteps[0].nativeElement.querySelector('.ant-steps-item-rail')).toBeTruthy();
+      expect(innerSteps[1].nativeElement.querySelector('.ant-steps-item-rail')).toBeTruthy();
+      expect(innerSteps[2].nativeElement.querySelector('.ant-steps-item-rail')).toBeFalsy();
     }));
 
     it('should title correct', () => {
@@ -101,13 +101,13 @@ describe('steps', () => {
 
     it('should description correct', () => {
       fixture.detectChanges();
-      expect(innerSteps[0].nativeElement.querySelector('.ant-steps-item-description').innerText.trim()).toBe(
+      expect(innerSteps[0].nativeElement.querySelector('.ant-steps-item-content').innerText.trim()).toBe(
         '0description'
       );
-      expect(innerSteps[1].nativeElement.querySelector('.ant-steps-item-description').innerText.trim()).toBe(
+      expect(innerSteps[1].nativeElement.querySelector('.ant-steps-item-content').innerText.trim()).toBe(
         '1description'
       );
-      expect(innerSteps[2].nativeElement.querySelector('.ant-steps-item-description').innerText.trim()).toBe(
+      expect(innerSteps[2].nativeElement.querySelector('.ant-steps-item-content').innerText.trim()).toBe(
         '2description'
       );
     });
@@ -297,15 +297,9 @@ describe('steps', () => {
 
     it('should description display correct', () => {
       fixture.detectChanges();
-      expect(innerSteps[0].nativeElement.querySelector('.ant-steps-item-description').innerText.trim()).toBe(
-        'description'
-      );
-      expect(innerSteps[1].nativeElement.querySelector('.ant-steps-item-description').innerText.trim()).toBe(
-        'description'
-      );
-      expect(innerSteps[2].nativeElement.querySelector('.ant-steps-item-description').innerText.trim()).toBe(
-        'description'
-      );
+      expect(innerSteps[0].nativeElement.querySelector('.ant-steps-item-content').innerText.trim()).toBe('description');
+      expect(innerSteps[1].nativeElement.querySelector('.ant-steps-item-content').innerText.trim()).toBe('description');
+      expect(innerSteps[2].nativeElement.querySelector('.ant-steps-item-content').innerText.trim()).toBe('description');
     });
 
     it('should icon display correct', () => {
@@ -340,13 +334,13 @@ describe('steps', () => {
 
     it('should description display correct', () => {
       fixture.detectChanges();
-      expect(innerSteps[0].nativeElement.querySelector('.ant-steps-item-description').innerText.trim()).toBe(
+      expect(innerSteps[0].nativeElement.querySelector('.ant-steps-item-content').innerText.trim()).toBe(
         'descriptionTemplate'
       );
-      expect(innerSteps[1].nativeElement.querySelector('.ant-steps-item-description').innerText.trim()).toBe(
+      expect(innerSteps[1].nativeElement.querySelector('.ant-steps-item-content').innerText.trim()).toBe(
         'descriptionTemplate'
       );
-      expect(innerSteps[2].nativeElement.querySelector('.ant-steps-item-description').innerText.trim()).toBe(
+      expect(innerSteps[2].nativeElement.querySelector('.ant-steps-item-content').innerText.trim()).toBe(
         'descriptionTemplate'
       );
     });
@@ -417,7 +411,7 @@ describe('steps', () => {
       tick();
       fixture.detectChanges();
       innerSteps
-        .map(step => step.nativeElement.querySelector('.ant-steps-item-container'))
+        .map(step => step.nativeElement.querySelector('.ant-steps-item-wrapper'))
         .forEach((e: HTMLElement) => {
           expect(e.getAttribute('role')).toBe('button');
         });
@@ -428,7 +422,7 @@ describe('steps', () => {
       tick();
       fixture.detectChanges();
       spyOn(testComponent, 'onIndexChange');
-      innerSteps[1].nativeElement.querySelector('.ant-steps-item-container').click();
+      innerSteps[1].nativeElement.querySelector('.ant-steps-item-wrapper').click();
       fixture.detectChanges();
       expect(testComponent.onIndexChange).toHaveBeenCalledWith(1);
     }));
@@ -438,7 +432,7 @@ describe('steps', () => {
       fixture.detectChanges();
       tick();
       fixture.detectChanges();
-      const step = innerSteps[0].nativeElement.querySelector('.ant-steps-item-container') as HTMLElement;
+      const step = innerSteps[0].nativeElement.querySelector('.ant-steps-item-wrapper') as HTMLElement;
       expect(step.getAttribute('role')).not.toBe('button');
       spyOn(testComponent, 'onIndexChange');
       step.click();
@@ -465,12 +459,12 @@ describe('steps', () => {
       innerSteps[1].componentInstance.disable();
       fixture.detectChanges();
       spyOn(testComponent, 'onIndexChange');
-      innerSteps[1].nativeElement.querySelector('.ant-steps-item-container').click();
+      innerSteps[1].nativeElement.querySelector('.ant-steps-item-wrapper').click();
       fixture.detectChanges();
       expect(testComponent.onIndexChange).not.toHaveBeenCalled();
       innerSteps[1].componentInstance.enable();
       fixture.detectChanges();
-      innerSteps[1].nativeElement.querySelector('.ant-steps-item-container').click();
+      innerSteps[1].nativeElement.querySelector('.ant-steps-item-wrapper').click();
       fixture.detectChanges();
       expect(testComponent.onIndexChange).toHaveBeenCalledTimes(1);
       expect(testComponent.onIndexChange).toHaveBeenCalledWith(1);
diff --git a/components/steps/style/custom-icon.less b/components/steps/style/custom-icon.less
index debbb994e6d..9212549fb30 100644
--- a/components/steps/style/custom-icon.less
+++ b/components/steps/style/custom-icon.less
@@ -1,5 +1,5 @@
 .@{steps-prefix-cls}-item-custom {
-  > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-icon {
+  > .@{steps-prefix-cls}-item-wrapper > .@{steps-prefix-cls}-item-icon {
     height: auto;
     background: none;
     border: 0;
diff --git a/components/steps/style/index.less b/components/steps/style/index.less
index a57ecd1117e..5f6b0ca2fa1 100644
--- a/components/steps/style/index.less
+++ b/components/steps/style/index.less
@@ -36,25 +36,30 @@
   overflow: hidden;
   vertical-align: top;
 
-  &-container {
-    outline: none;
+  &-wrapper {
+    display: flex;
+    flex-wrap: nowrap;
+    padding-top: 0;
   }
 
   &:last-child {
     flex: none;
   }
 
-  &:last-child > &-container > &-tail,
-  &:last-child > &-container > &-content > &-title::after {
+  &:last-child > &-wrapper > &-section > &-header > &-rail {
     display: none;
   }
 
   &-icon,
-  &-content {
+  &-section {
     display: inline-block;
     vertical-align: top;
   }
 
+  &-section {
+    flex: 1 1;
+  }
+
   &-icon {
     width: @steps-icon-size;
     height: @steps-icon-size;
@@ -75,42 +80,18 @@
     }
   }
 
-  &-tail {
-    position: absolute;
-    top: 12px;
-    left: 0;
-    width: 100%;
-    padding: 0 10px;
-
-    &::after {
-      display: inline-block;
-      width: 100%;
-      height: 1px;
-      background: @border-color-split;
-      border-radius: 1px;
-      transition: background 0.3s;
-      content: '';
-    }
+  > &-wrapper > &-section > &-header > &-rail {
+    // Base styles - will be overridden in horizontal/vertical modes
+    display: none;
+    height: 1px;
   }
 
   &-title {
     position: relative;
     display: inline-block;
-    padding-right: 16px;
     color: @text-color;
     font-size: @font-size-lg;
     line-height: @steps-title-line-height;
-
-    &::after {
-      position: absolute;
-      top: (@steps-title-line-height / 2);
-      left: 100%;
-      display: block;
-      width: 9999px;
-      height: 1px;
-      background: @wait-tail-color;
-      content: '';
-    }
   }
 
   &-subtitle {
@@ -121,27 +102,27 @@
     font-size: @font-size-base;
   }
 
-  &-description {
+  &-content {
     color: @text-color-secondary;
     font-size: @font-size-base;
   }
   .step-item-status(wait);
   .step-item-status(process);
 
-  &-process > &-container > &-icon {
+  &-process > &-wrapper > &-icon {
     background: @process-icon-color;
     .@{steps-prefix-cls}-icon {
       color: @process-icon-text-color;
     }
   }
 
-  &-process > &-container > &-title {
+  &-process > &-wrapper > &-section > &-header > &-title {
     font-weight: 500;
   }
   .step-item-status(finish);
   .step-item-status(error);
 
-  &.@{steps-prefix-cls}-next-error .@{steps-prefix-cls}-item-title::after {
+  &.@{steps-prefix-cls}-next-error > &-wrapper > &-section > &-header > &-rail {
     background: @error-icon-color;
   }
 
@@ -153,13 +134,13 @@
 // ===================== Clickable =====================
 .@{steps-prefix-cls} .@{steps-prefix-cls}-item {
   &:not(.@{steps-prefix-cls}-item-active) {
-    & > .@{steps-prefix-cls}-item-container[role='button'] {
+    & > .@{steps-prefix-cls}-item-wrapper[role='button'] {
       cursor: pointer;
 
       .@{steps-prefix-cls}-item {
         &-title,
         &-subtitle,
-        &-description,
+        &-content,
         &-icon .@{steps-prefix-cls}-icon {
           transition: color 0.3s;
         }
@@ -169,7 +150,7 @@
         .@{steps-prefix-cls}-item {
           &-title,
           &-subtitle,
-          &-description {
+          &-content {
             color: @primary-color;
           }
         }
@@ -177,7 +158,7 @@
     }
 
     &:not(.@{steps-prefix-cls}-item-process) {
-      & > .@{steps-prefix-cls}-item-container[role='button']:hover {
+      & > .@{steps-prefix-cls}-item-wrapper[role='button']:hover {
         .@{steps-prefix-cls}-item {
           &-icon {
             border-color: @primary-color;
@@ -204,11 +185,36 @@
       padding-right: 0;
     }
 
-    &-tail {
-      display: none;
+    // In horizontal mode use the rail (after title+subtitle) for the line so it doesn't overlap subtitle
+    &-header {
+      position: relative;
+      display: flex;
+      flex-wrap: nowrap;
+      align-items: center;
+      overflow: visible;
+
+      &-subtitle {
+        flex-shrink: 0;
+        margin-right: 0;
+      }
     }
 
-    &-description {
+    &-rail {
+      position: static;
+      display: block !important;
+      flex: 1;
+      width: auto;
+      height: 1px;
+      margin: 0;
+      margin-left: 16px;
+      padding: 0;
+      overflow: visible;
+      background: @wait-tail-color;
+      border-radius: 1px;
+      transition: background 0.3s;;
+    }
+
+    &-content {
       max-width: @steps-description-max-width;
       white-space: normal;
     }
@@ -230,17 +236,13 @@
       }
     }
   }
-  &-@{status} > &-container > &-content > &-title {
+  &-@{status} > &-wrapper > &-section > &-header > &-title {
     color: @@title-color;
-
-    &::after {
-      background-color: @@tail-color;
-    }
   }
-  &-@{status} > &-container > &-content > &-description {
+  &-@{status} > &-wrapper > &-section > &-content {
     color: @@description-color;
   }
-  &-@{status} > &-container > &-tail::after {
+  &-@{status} > &-wrapper > &-section > &-header > &-rail {
     background-color: @@tail-color;
   }
 }
diff --git a/components/steps/style/label-placement.less b/components/steps/style/label-placement.less
index a1bfd9b26e9..554df9e7095 100644
--- a/components/steps/style/label-placement.less
+++ b/components/steps/style/label-placement.less
@@ -2,11 +2,12 @@
   .@{steps-prefix-cls}-item {
     overflow: visible;
 
-    &-tail {
+    &-header &-rail {
       margin-left: 58px;
       padding: 3.5px 24px;
     }
 
+    &-header,
     &-content {
       display: block;
       width: ((@steps-icon-size / 2) + 42px) * 2;
@@ -14,6 +15,14 @@
       text-align: center;
     }
 
+    &-header {
+      margin-top: 8px;
+    }
+
+    &-content {
+      margin-top: 0;
+    }
+
     &-icon {
       display: inline-block;
       margin-left: 42px;
diff --git a/components/steps/style/nav.less b/components/steps/style/nav.less
index 0c39fa6f822..080147a19fc 100644
--- a/components/steps/style/nav.less
+++ b/components/steps/style/nav.less
@@ -3,9 +3,9 @@
 
   &.@{steps-prefix-cls}-small {
     .@{steps-prefix-cls}-item {
-      &-container {
-        margin-left: -12px;
-      }
+    &-wrapper {
+      margin-left: -12px;
+    }
     }
   }
 
@@ -13,7 +13,7 @@
     overflow: visible;
     text-align: center;
 
-    &-container {
+    &-wrapper {
       display: inline-block;
       height: 100%;
       margin-left: -16px;
@@ -21,13 +21,14 @@
       text-align: left;
       transition: opacity 0.3s;
 
+      .@{steps-prefix-cls}-item-header,
       .@{steps-prefix-cls}-item-content {
         max-width: @steps-nav-content-max-width;
       }
 
       .@{steps-prefix-cls}-item-title {
         max-width: 100%;
-        padding-right: 0;
+        padding-right: 8px;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
@@ -39,7 +40,7 @@
     }
 
     &:not(.@{steps-prefix-cls}-item-active) {
-      .@{steps-prefix-cls}-item-container[role='button'] {
+      .@{steps-prefix-cls}-item-wrapper[role='button'] {
         cursor: pointer;
 
         &:hover {
@@ -119,7 +120,7 @@
       text-align: center;
       transform: rotate(135deg);
     }
-    > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
+    > .@{steps-prefix-cls}-item-wrapper > .@{steps-prefix-cls}-item-section > .@{steps-prefix-cls}-item-header > .@{steps-prefix-cls}-item-rail {
       visibility: hidden;
     }
   }
@@ -127,8 +128,10 @@
 
 .@{steps-prefix-cls}-navigation.@{steps-prefix-cls}-horizontal {
   > .@{steps-prefix-cls}-item
-    > .@{steps-prefix-cls}-item-container
-    > .@{steps-prefix-cls}-item-tail {
+    > .@{steps-prefix-cls}-item-wrapper
+    > .@{steps-prefix-cls}-item-section
+    > .@{steps-prefix-cls}-item-header
+    > .@{steps-prefix-cls}-item-rail {
     visibility: hidden;
   }
 }
diff --git a/components/steps/style/progress-dot.less b/components/steps/style/progress-dot.less
index a3bd3417b41..3d612b7969c 100644
--- a/components/steps/style/progress-dot.less
+++ b/components/steps/style/progress-dot.less
@@ -1,3 +1,34 @@
+// Horizontal dot only (vertical has its own block below)
+.@{steps-prefix-cls}-dot:not(.@{steps-prefix-cls}-vertical),
+.@{steps-prefix-cls}-dot.@{steps-prefix-cls}-small:not(.@{steps-prefix-cls}-vertical) {
+  .@{steps-prefix-cls}-item {
+    &-wrapper {
+      position: relative;
+      flex-direction: column;
+      align-items: center;
+
+      &-section {
+        align-self: stretch;
+      }
+    }
+
+    @rail-gap: 8px;
+
+    &-rail {
+      position: absolute !important;
+      right: @rail-gap;
+      left: calc(50% + (@steps-dot-size / 2) + @rail-gap); // gap after current dot
+      width: calc(100% - @rail-gap - (@steps-dot-size * 2));
+      height: 3px;
+      margin: 0;
+      padding: 0;
+      overflow: visible;
+      border-radius: 1px;
+      transition: background 0.3s;
+    }
+  }
+}
+
 .@{steps-prefix-cls}-dot,
 .@{steps-prefix-cls}-dot.@{steps-prefix-cls}-small {
   .@{steps-prefix-cls}-item {
@@ -5,26 +36,30 @@
       line-height: @line-height-base;
     }
 
-    &-tail {
+    &-rail {
       top: @steps-dot-top;
+      display: block !important;
       width: 100%;
-      margin: 0 0 0 (@steps-description-max-width / 2);
+      height: 3px;
+      margin: 0;
       padding: 0;
-
-      &::after {
-        width: ~'calc(100% - 20px)';
-        height: 3px;
-        margin-left: 12px;
-      }
+      background: @border-color-split;
+      border-radius: 1px;
+      transition: background 0.3s;
     }
+    
     &:first-child .@{steps-prefix-cls}-icon-dot {
       left: 2px;
     }
 
+    &:last-child {
+      flex: 1;
+    }
+
     &-icon {
       width: @steps-dot-size;
       height: @steps-dot-size;
-      margin-left: 67px;
+      margin: 0;
       padding-right: 0;
       line-height: @steps-dot-size;
       background: transparent;
@@ -51,8 +86,16 @@
       }
     }
 
+    &-section {
+      align-self: stretch;
+    }
+
+    &-header {
+      width: inherit;
+    }
+
     &-content {
-      width: @steps-description-max-width;
+      width: inherit;
     }
     &-process .@{steps-prefix-cls}-item-icon {
       position: relative;
@@ -72,17 +115,23 @@
 
 .@{steps-prefix-cls}-vertical.@{steps-prefix-cls}-dot {
   .@{steps-prefix-cls}-item-icon {
+    float: left;
     margin-top: 13px;
+    margin-right: @steps-vertical-icon-width;
     margin-left: 0;
     background: none;
   }
 
-  // https://github.com/ant-design/ant-design/issues/18354
-  .@{steps-prefix-cls}-item > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
-    top: 6.5px;
-    left: -9px;
-    margin: 0;
-    padding: 22px 0 4px;
+  .@{steps-prefix-cls}-item:not(:last-child) > .@{steps-prefix-cls}-item-wrapper > .@{steps-prefix-cls}-item-section > .@{steps-prefix-cls}-item-header > .@{steps-prefix-cls}-item-rail {
+    position: absolute;
+    top: (@steps-dot-size * 2) + 13px;
+    bottom: -(@steps-dot-size * 2) + 13px;
+    left: (@steps-dot-size / 2) - 0.5px;
+    display: block !important;
+    width: 1px;
+    height: auto;
+    border-radius: 1px;
+    transition: background 0.3s;
   }
 
   &.@{steps-prefix-cls}-small {
@@ -90,10 +139,13 @@
       margin-top: 10px;
     }
 
-    .@{steps-prefix-cls}-item
-      > .@{steps-prefix-cls}-item-container
-      > .@{steps-prefix-cls}-item-tail {
+    .@{steps-prefix-cls}-item:not(:last-child)
+      > .@{steps-prefix-cls}-item-wrapper
+      > .@{steps-prefix-cls}-item-section
+      > .@{steps-prefix-cls}-item-header
+      > .@{steps-prefix-cls}-item-rail {
       top: 3.5px;
+      left: (@steps-dot-size / 2) - 0.5px;
     }
   }
 
@@ -104,7 +156,7 @@
     width: inherit;
   }
   .@{steps-prefix-cls}-item-process
-    .@{steps-prefix-cls}-item-container
+    .@{steps-prefix-cls}-item-wrapper
     .@{steps-prefix-cls}-item-icon
     .@{steps-prefix-cls}-icon-dot {
     top: -1px;
diff --git a/components/steps/style/progress.less b/components/steps/style/progress.less
index 98cc430e630..805bb4b65a9 100644
--- a/components/steps/style/progress.less
+++ b/components/steps/style/progress.less
@@ -4,7 +4,7 @@
   .@{steps-prefix-cls}-item {
     padding-top: 4px;
 
-    & > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
+    & > .@{steps-prefix-cls}-item-wrapper > .@{steps-prefix-cls}-item-section > .@{steps-prefix-cls}-item-header > .@{steps-prefix-cls}-item-rail {
       top: 4px;
       left: @steps-vertical-tail-width + 3;
     }
@@ -20,8 +20,10 @@
 
   &.@{steps-prefix-cls}-small
     > .@{steps-prefix-cls}-item
-    > .@{steps-prefix-cls}-item-container
-    > .@{steps-prefix-cls}-item-tail {
+    > .@{steps-prefix-cls}-item-wrapper
+    > .@{steps-prefix-cls}-item-section
+    > .@{steps-prefix-cls}-item-header
+    > .@{steps-prefix-cls}-item-rail {
     left: @steps-vertical-tail-width-sm + 3;
   }
 
@@ -30,7 +32,7 @@
   }
 
   &.@{steps-prefix-cls}-label-vertical {
-    .@{steps-prefix-cls}-item .@{steps-prefix-cls}-item-tail {
+    .@{steps-prefix-cls}-item .@{steps-prefix-cls}-item-header .@{steps-prefix-cls}-item-rail {
       top: 14px !important;
     }
   }
diff --git a/components/steps/style/rtl.less b/components/steps/style/rtl.less
index 7d92d83cce7..7b393189874 100644
--- a/components/steps/style/rtl.less
+++ b/components/steps/style/rtl.less
@@ -12,7 +12,7 @@
     }
   }
 
-  &-tail {
+  &-header &-rail {
     .@{steps-prefix-cls}-rtl & {
       right: 0;
       left: auto;
@@ -25,14 +25,6 @@
       padding-left: 16px;
     }
 
-    .@{steps-prefix-cls}-item-subtitle {
-      .@{steps-prefix-cls}-rtl & {
-        float: left;
-        margin-right: 8px;
-        margin-left: 0;
-      }
-    }
-
     &::after {
       .@{steps-prefix-cls}-rtl & {
         right: 100%;
@@ -40,6 +32,14 @@
       }
     }
   }
+
+  &-header .@{steps-prefix-cls}-item-subtitle {
+    .@{steps-prefix-cls}-rtl & {
+      float: left;
+      margin-right: 8px;
+      margin-left: 0;
+    }
+  }
 }
 
 .@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical) {
@@ -79,7 +79,7 @@
 .@{steps-prefix-cls}-navigation {
   &.@{steps-prefix-cls}-small {
     .@{steps-prefix-cls}-item {
-      &-container {
+      &-wrapper {
         .@{steps-prefix-cls}-rtl& {
           margin-right: -12px;
           margin-left: 0;
@@ -89,7 +89,7 @@
   }
 
   .@{steps-prefix-cls}-item {
-    &-container {
+    &-wrapper {
       .@{steps-prefix-cls}-rtl& {
         margin-right: -16px;
         margin-left: 0;
@@ -152,16 +152,16 @@
   }
 
   > .@{steps-prefix-cls}-item
-    > .@{steps-prefix-cls}-item-container
-    > .@{steps-prefix-cls}-item-tail {
+    > .@{steps-prefix-cls}-item-wrapper
+    > .@{steps-prefix-cls}-item-rail {
     .@{steps-prefix-cls}-rtl& {
       right: @steps-vertical-tail-width;
       left: auto;
     }
   }
 
-  &.@{steps-prefix-cls}-small .@{steps-prefix-cls}-item-container {
-    .@{steps-prefix-cls}-item-tail {
+  &.@{steps-prefix-cls}-small .@{steps-prefix-cls}-item-wrapper {
+    .@{steps-prefix-cls}-item-section .@{steps-prefix-cls}-item-header .@{steps-prefix-cls}-item-rail {
       .@{steps-prefix-cls}-rtl& {
         right: @steps-vertical-tail-width-sm;
         left: auto;
@@ -185,7 +185,7 @@
 .@{steps-prefix-cls}-dot,
 .@{steps-prefix-cls}-dot.@{steps-prefix-cls}-small {
   .@{steps-prefix-cls}-item {
-    &-tail {
+    &-header &-rail {
       .@{steps-prefix-cls}-rtl& {
         margin: 0 (@steps-description-max-width / 2) 0 0;
       }
@@ -237,7 +237,7 @@
   }
 
   // https://github.com/ant-design/ant-design/issues/18354
-  .@{steps-prefix-cls}-item > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
+  .@{steps-prefix-cls}-item > .@{steps-prefix-cls}-item-wrapper > .@{steps-prefix-cls}-item-section > .@{steps-prefix-cls}-item-header > .@{steps-prefix-cls}-item-rail {
     .@{steps-prefix-cls}-rtl& {
       right: -9px;
       left: auto;
@@ -263,13 +263,13 @@
 .@{steps-prefix-cls}-rtl.@{steps-prefix-cls}-with-progress {
   &.@{steps-prefix-cls}-vertical > .@{steps-prefix-cls}-item {
     padding-right: 4px;
-    > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
+    > .@{steps-prefix-cls}-item-wrapper > .@{steps-prefix-cls}-item-section > .@{steps-prefix-cls}-item-header > .@{steps-prefix-cls}-item-rail {
       right: @steps-vertical-tail-width + 3;
     }
   }
 
   &.@{steps-prefix-cls}-small.@{steps-prefix-cls}-vertical > .@{steps-prefix-cls}-item {
-    > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
+    > .@{steps-prefix-cls}-item-wrapper > .@{steps-prefix-cls}-item-section > .@{steps-prefix-cls}-item-header > .@{steps-prefix-cls}-item-rail {
       right: @steps-vertical-tail-width-sm + 3;
     }
   }
diff --git a/components/steps/style/small.less b/components/steps/style/small.less
index 329e5984376..9f4967c62f1 100644
--- a/components/steps/style/small.less
+++ b/components/steps/style/small.less
@@ -17,20 +17,21 @@
     border-radius: @steps-small-icon-size;
   }
   .@{steps-prefix-cls}-item-title {
-    padding-right: 12px;
     font-size: @font-size-base;
     line-height: @steps-small-icon-size;
-
-    &::after {
-      top: (@steps-small-icon-size / 2);
-    }
   }
-  .@{steps-prefix-cls}-item-description {
+  .@{steps-prefix-cls}-item-content {
     color: @text-color-secondary;
     font-size: @font-size-base;
   }
-  .@{steps-prefix-cls}-item-tail {
-    top: 8px;
+  &.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical)
+    .@{steps-prefix-cls}-item
+    > .@{steps-prefix-cls}-item-wrapper
+    > .@{steps-prefix-cls}-item-section
+    > .@{steps-prefix-cls}-item-header
+    > .@{steps-prefix-cls}-item-rail {
+    height: 1px;
+    margin-left: 12px;
   }
   .@{steps-prefix-cls}-item-custom .@{steps-prefix-cls}-item-icon {
     width: inherit;
diff --git a/components/steps/style/vertical.less b/components/steps/style/vertical.less
index 8c7d21a1cde..29743180643 100644
--- a/components/steps/style/vertical.less
+++ b/components/steps/style/vertical.less
@@ -13,9 +13,13 @@
       margin-right: @steps-vertical-icon-width;
     }
 
+    .@{steps-prefix-cls}-item-header {
+      display: block;
+      overflow: visible;
+    }
+
     .@{steps-prefix-cls}-item-content {
       display: block;
-      min-height: 48px;
       overflow: hidden;
     }
 
@@ -23,51 +27,44 @@
       line-height: @steps-icon-size;
     }
 
-    .@{steps-prefix-cls}-item-description {
+    .@{steps-prefix-cls}-item-content {
       padding-bottom: 12px;
     }
   }
 
-  > .@{steps-prefix-cls}-item
-    > .@{steps-prefix-cls}-item-container
-    > .@{steps-prefix-cls}-item-tail {
+  > .@{steps-prefix-cls}-item:not(:last-child)
+    > .@{steps-prefix-cls}-item-wrapper
+    > .@{steps-prefix-cls}-item-section
+    > .@{steps-prefix-cls}-item-header
+    > .@{steps-prefix-cls}-item-rail {
     position: absolute;
-    top: 0;
+    top: @steps-icon-size + 6px;
+    bottom: 6px;
     left: @steps-vertical-tail-width - 1; // line width
+    display: block !important;
     width: 1px;
-    height: 100%;
-    padding: @steps-icon-size + 6px 0 6px;
-
-    &::after {
-      width: 1px;
-      height: 100%;
-    }
+    border-radius: 1px;
+    transition: background 0.3s;
   }
 
-  > .@{steps-prefix-cls}-item:not(:last-child)
-    > .@{steps-prefix-cls}-item-container
-    > .@{steps-prefix-cls}-item-tail {
-    display: block;
-  }
 
-  > .@{steps-prefix-cls}-item
-    > .@{steps-prefix-cls}-item-container
-    > .@{steps-prefix-cls}-item-content
-    > .@{steps-prefix-cls}-item-title {
-    &::after {
-      display: none;
-    }
+
+  &.@{steps-prefix-cls}-small
+    > .@{steps-prefix-cls}-item:not(:last-child)
+    > .@{steps-prefix-cls}-item-wrapper
+    > .@{steps-prefix-cls}-item-section
+    > .@{steps-prefix-cls}-item-header
+    > .@{steps-prefix-cls}-item-rail {
+    top: @steps-small-icon-size + 6px;
+    left: @steps-vertical-tail-width-sm - 1; // line width
   }
 
-  &.@{steps-prefix-cls}-small .@{steps-prefix-cls}-item-container {
-    .@{steps-prefix-cls}-item-tail {
-      position: absolute;
-      top: 0;
-      left: @steps-vertical-tail-width-sm - 1; // line width
-      padding: @steps-small-icon-size + 6px 0 6px;
-    }
-    .@{steps-prefix-cls}-item-title {
-      line-height: @steps-small-icon-size;
-    }
+  &.@{steps-prefix-cls}-small
+    > .@{steps-prefix-cls}-item
+    > .@{steps-prefix-cls}-item-wrapper
+    > .@{steps-prefix-cls}-item-section
+    > .@{steps-prefix-cls}-item-header
+    > .@{steps-prefix-cls}-item-title {
+    line-height: @steps-small-icon-size;
   }
 }