CSS bottom border is shorter when using pseudo :after

When my web page loads it plays this bottom border animation, then afterwords it will display a static bottom border. The issue is, you can see from this snippet that the animated border is shorter than the static border.. How can I center this so both borders are identical at the end result? I would ideally like both borders to look like the second, longer one shown in the snippet.

I have played around with the width but can't seem to figure out what parameter needs a change.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
       
<style>
    .border-bottom-animate:after {
         content: "";  
         display: block; 
         border-bottom: 5px dotted black; 
         width: 100%;
         animation-duration: 3s;
         animation-name: border-animation;
    }

    @keyframes border-animation {
      from {
         width: 0%;
      }
      to {
        width: 100%;
      }
   } 
   
   .border-bottom-noanimate {
       content: "";  
         display: block; 
         border-bottom: 5px dotted black; 
         width: 100%;
   }
</style>
    </head>
<body>

    <div class="container border-bottom-animate">
        <p style="font-size: xx-large">
           border animation
        </p>
        
    </div>
    
     <div class="container border-bottom-noanimate">
        <p style="font-size: xx-large">
           border no animation
        </p>
        
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>

Solution

you can add a position:relative to the container, and set its after pseudo-element’s pasition to absolute and left to 0, so that it’ll start right from the beginning of its container.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
       
<style>
    .container{
         position:relative;
    }
    .border-bottom-animate:after {
         content: "";  
         position:absolute;
         left:0;
         display: block; 
         border-bottom: 5px dotted black; 
         width: 100%;
         animation-duration: 3s;
         animation-name: border-animation;
    }

    @keyframes border-animation {
      from {
         width: 0%;
      }
      to {
        width: 100%;
      }
   } 
   
   .border-bottom-noanimate {
       content: "";  
         display: block; 
         border-bottom: 5px dotted black; 
         width: 100%;
   }
</style>
    </head>
<body>

    <div class="container border-bottom-animate">
        <p style="font-size: xx-large">
           border animation
        </p>
        
    </div>
    
     <div class="container border-bottom-noanimate">
        <p style="font-size: xx-large">
           border no animation
        </p>
        
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>