content based hash positioning

components/heading.tsx

@@ -82,7 +82,7 @@ export default function Heading({
       className={cn(
         'group relative',
         'my-4 sm:my-6 md:my-8 lg:my-10 xl:my-12',
-        'flex flex-nowrap items-center gap-2 sm:gap-3 md:gap-4',
+        'flex flex-nowrap items-center space-x-2 sm:space-x-3 md:space-x-4',
         className
       )}
       {...props}
@@ -92,11 +92,11 @@ export default function Heading({
       <Comp className="my-auto min-w-fit">{text}</Comp>
       {glyphDirection === 'ltr' && <Horses direction={glyphDirection} />}
       {glyphDirection === 'dual' && <Elephants direction="ltr" />}
-      <Comp className="absolute left-full my-auto md:pl-2">
+      <Comp className="left-full my-auto !ml-0 w-0 overflow-visible">
         {href && (
           <Link
             href={href}
-            className="hidden animate-in fade-in zoom-in hover:font-medium hover:text-neutral-800 group-hover:inline-block"
+            className="hidden animate-in fade-in zoom-in before:pl-2 hover:font-medium hover:text-neutral-800 group-hover:inline-block"
           >
             #
           </Link>