CSS bottom border is shorter when using pseudo :after-CodePudding

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/[email protected]/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 >
        <p style="font-size: xx-large">
           border animation
        </p>
        
    </div>
    
     <div >
        <p style="font-size: xx-large">
           border no animation
        </p>
        
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-IDwe1 LCz02ROU9k972gdyvl AESN10 x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA /3y gxIOqMEjwtxJY7qPCqsdltbNJuaOe923 mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>

CodePudding user response：

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/[email protected]/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 >
        <p style="font-size: xx-large">
           border animation
        </p>
        
    </div>
    
     <div >
        <p style="font-size: xx-large">
           border no animation
        </p>
        
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-IDwe1 LCz02ROU9k972gdyvl AESN10 x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA /3y gxIOqMEjwtxJY7qPCqsdltbNJuaOe923 mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>

CodePudding user response：

The :after pseudo-element is only as wide as the content inside the padding. You need to add the size of the padding to your :after's width. Then adjust the margin to account for the greater width. Bootstrap uses calc(var(--bs-gutter-x) * .5) to define the padding-left and padding-right of a .container.
See my comments in the snippet CSS below. I minimalized the snippet but, there are only 2 lines with a change plus 2 comment lines from your code.

.border-bottom-animate:after {
  content: "";
  display: block;
  border-bottom: 5px dotted black;
  /* add the bootstrap gutter width */
  width: calc(var(--bs-gutter-x)   100%);
  animation-duration: 3s;
  animation-name: border-animation;
  /* give a negative x margin half the gutter width */
  margin: 0 calc(var(--bs-gutter-x) * -.5);
}

@keyframes border-animation {
  from {
    width: 0%;
  }
  to {
    width: calc(var(--bs-gutter-x)   100%);
  }
}

.border-bottom-noanimate {
  content: "";
  display: block;
  border-bottom: 5px dotted black;
  width: 100%;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<div >
  <p style="font-size: xx-large">
    border animation
  </p>

</div>

<div >
  <p style="font-size: xx-large">
    border no animation
  </p>

</div>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA /3y gxIOqMEjwtxJY7qPCqsdltbNJuaOe923 mo//f6V8Qbsw3" crossorigin="anonymous"></script>