diff --git a/common/counter.ts b/common/counter.ts
index d23f8b5..aab56ae 100644
--- a/common/counter.ts
+++ b/common/counter.ts
@@ -2,7 +2,6 @@ import type {
   LevelTuple,
   BaseDecoratorOptions,
   DecoratorOptions,
-  PostionOptions,
 } from "./data";
 import { defaultHeadingTuple } from "./data";
 import * as presets from "@jsamr/counter-style/presets";
@@ -61,7 +60,7 @@ export class Counter {
     return this.levels.slice(0, level);
   }
 
-  decorator(level: number, postion?: PostionOptions): string {
+  decorator(level: number): string {
     let result = "";
     if (level < 1 || level > 6) {
       return result;
@@ -102,11 +101,6 @@ export class Counter {
       result = this.decoratorOptions.levelHeadings[level - 1];
     }
 
-    if (postion === "before") {
-      return `${result} `;
-    } else if (postion === "after") {
-      return ` ${result}`;
-    }
     return result;
   }
 }
diff --git a/components/view.ts b/components/view.ts
index 20138fb..5575d05 100644
--- a/components/view.ts
+++ b/components/view.ts
@@ -198,7 +198,7 @@ export class HeadingViewPlugin implements PluginValue {
           continue;
         }
 
-        const content = counter.decorator(level, position);
+        const content = counter.decorator(level);
 
         const headingClassName = isLivePreviwMode
           ? previewHeadingDecoratorClassName
diff --git a/main.ts b/main.ts
index e08ff9b..f72a626 100644
--- a/main.ts
+++ b/main.ts
@@ -131,7 +131,7 @@ export default class HeadingPlugin extends Plugin {
             const level = headings[i].level;
 
             if (lineIndex === lineStart) {
-              const decortorContent = counter.decorator(level, position);
+              const decortorContent = counter.decorator(level);
               decorateHTMLElement(
                 headingElement,
                 decortorContent,
@@ -162,7 +162,7 @@ export default class HeadingPlugin extends Plugin {
 
         headingElements.forEach((headingElement) => {
           const level = queryHeadingLevelByElement(headingElement);
-          const decortorContent = counter.decorator(level, position);
+          const decortorContent = counter.decorator(level);
           decorateHTMLElement(
             headingElement,
             decortorContent,
diff --git a/styles.css b/styles.css
index 9a8dc5c..be069fa 100644
--- a/styles.css
+++ b/styles.css
@@ -1,8 +1,36 @@
 /* reading start */
 .reading-custom-heading-decorator.before-heading-decorator::before,
 .reading-custom-heading-decorator.after-heading-decorator::after {
+  display: inline-block;
   content: attr(data-heading-decorator);
   opacity: 20%;
+  transition: 0.25s ease-out;
+}
+
+.reading-custom-heading-decorator.before-heading-decorator::before {
+  margin-inline-end: 6px;
+}
+
+.is-collapsed
+  > .reading-custom-heading-decorator.before-heading-decorator::before,
+.is-collapsed
+  > .reading-custom-heading-decorator.before-heading-decorator[dir="auto"]::before,
+.is-collapsed
+  > .reading-custom-heading-decorator.before-heading-decorator[dir="ltr"]::before,
+.reading-custom-heading-decorator.before-heading-decorator:hover::before,
+.reading-custom-heading-decorator.before-heading-decorator[dir="auto"]:hover::before,
+.reading-custom-heading-decorator.before-heading-decorator[dir="ltr"]:hover::before {
+  translate: -12px;
+}
+
+.is-collapsed
+  > .reading-custom-heading-decorator.before-heading-decorator[dir="rtl"]::before,
+.reading-custom-heading-decorator.before-heading-decorator[dir="rtl"]:hover::before {
+  translate: 12px;
+}
+
+.reading-custom-heading-decorator.after-heading-decorator::after {
+  margin-inline-start: 6px;
 }
 
 .reading-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="10%"]::before,
@@ -56,8 +84,62 @@
   .preview-custom-heading-decorator.after-heading-decorator:not(.cm-active):not(
     :has(.cm-header.cm-formatting)
   )::after {
+  display: inline-block;
   content: attr(data-heading-decorator);
   opacity: 20%;
+  transition: 0.25s ease-out;
+}
+
+.is-live-preview
+  .preview-custom-heading-decorator.before-heading-decorator:not(
+    .cm-active
+  ):not(:has(.cm-header.cm-formatting))::before {
+  margin-inline-end: 6px;
+}
+
+.is-live-preview
+  .preview-custom-heading-decorator.before-heading-decorator:not(
+    .cm-active
+  ):not(:has(.cm-header.cm-formatting)):has(> .is-collapsed)::before,
+.is-live-preview
+  .preview-custom-heading-decorator.before-heading-decorator[dir="auto"]:not(
+    .cm-active
+  ):not(:has(.cm-header.cm-formatting)):has(> .is-collapsed)::before,
+.is-live-preview
+  .preview-custom-heading-decorator.before-heading-decorator[dir="ltr"]:not(
+    .cm-active
+  ):not(:has(.cm-header.cm-formatting)):has(> .is-collapsed)::before,
+.is-live-preview
+  .preview-custom-heading-decorator.before-heading-decorator:not(
+    .cm-active
+  ):not(:has(.cm-header.cm-formatting)):hover::before,
+.is-live-preview
+  .preview-custom-heading-decorator.before-heading-decorator[dir="auto"]:not(
+    .cm-active
+  ):not(:has(.cm-header.cm-formatting)):hover::before,
+.is-live-preview
+  .preview-custom-heading-decorator.before-heading-decorator[dir="ltr"]:not(
+    .cm-active
+  ):not(:has(.cm-header.cm-formatting)):hover::before {
+  translate: -12px;
+}
+
+.is-live-preview
+  .preview-custom-heading-decorator.before-heading-decorator[dir="rtl"]:not(
+    .cm-active
+  ):not(:has(.cm-header.cm-formatting)):has(> .is-collapsed)::before,
+.is-live-preview
+  .preview-custom-heading-decorator.before-heading-decorator[dir="rtl"]:not(
+    .cm-active
+  ):not(:has(.cm-header.cm-formatting)):hover::before {
+  translate: 12px;
+}
+
+.is-live-preview
+  .preview-custom-heading-decorator.after-heading-decorator:not(.cm-active):not(
+    :has(.cm-header.cm-formatting)
+  )::after {
+  margin-inline-start: 6px;
 }
 
 .is-live-preview
@@ -169,8 +251,52 @@
 .source-custom-heading-decorator.after-heading-decorator:not(
     .cm-active
   )::after {
+  display: inline-block;
   content: attr(data-heading-decorator);
   opacity: 20%;
+  transition: 0.25s ease-out;
+}
+
+.source-custom-heading-decorator.before-heading-decorator:not(
+    .cm-active
+  )::before {
+  margin-inline-end: 6px;
+}
+
+.source-custom-heading-decorator.before-heading-decorator:not(.cm-active):has(
+    > .is-collapsed
+  )::before,
+.source-custom-heading-decorator.before-heading-decorator[dir="auto"]:not(
+    .cm-active
+  ):has(> .is-collapsed)::before,
+.source-custom-heading-decorator.before-heading-decorator[dir="ltr"]:not(
+    .cm-active
+  ):has(> .is-collapsed)::before,
+.source-custom-heading-decorator.before-heading-decorator:not(
+    .cm-active
+  ):hover::before,
+.source-custom-heading-decorator.before-heading-decorator[dir="auto"]:not(
+    .cm-active
+  ):hover::before,
+.source-custom-heading-decorator.before-heading-decorator[dir="ltr"]:not(
+    .cm-active
+  ):hover::before {
+  translate: -12px;
+}
+
+.source-custom-heading-decorator.before-heading-decorator[dir="rtl"]:not(
+    .cm-active
+  ):has(> .is-collapsed)::before,
+.source-custom-heading-decorator.before-heading-decorator[dir="rtl"]:not(
+    .cm-active
+  ):hover::before {
+  translate: 12px;
+}
+
+.source-custom-heading-decorator.after-heading-decorator:not(
+    .cm-active
+  )::after {
+  margin-inline-start: 6px;
 }
 
 .source-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="10%"]:not(
diff --git a/test/common/counter.spec.ts b/test/common/counter.spec.ts
index c722981..a2ffb1f 100644
--- a/test/common/counter.spec.ts
+++ b/test/common/counter.spec.ts
@@ -340,17 +340,6 @@ describe("common/counter", function () {
     expect(counter.decorator(2)).to.equal("1.1.");
   });
 
-  it("Counter.decorator with position parameter", function () {
-    const counter = new Counter({
-      ordered: true,
-      styleType: "decimal",
-    });
-
-    expect(counter.decorator(1)).to.equal("1");
-    expect(counter.decorator(1, "before")).to.equal("2 ");
-    expect(counter.decorator(2, "after")).to.equal(" 2.1");
-  });
-
   it("Counter.decorator with ignoreTopLevel", function () {
     const counter1 = new Counter({
       ordered: true,