How would you add space to animation

HTML-CSS
1 
header{
  width: 100%;
  height: 100vh;
  background-image: url(https://www.wallpapertip.com/wmimgs/219-2193017_dark-sky-background-png.png);


  
}
.container{
  max-width: 120rem;
  width: 90%;
  margin: 0 auto;
  text-align: center;
}
nav{
  padding-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-transform: uppercase;
  font-size: 1.6rem;
  background-image: url(https://www.wallpapertip.com/wmimgs/219-2193017_dark-sky-background-png.png);
  width: 100%;
  top: 0px;
   flex-direction: row-reverse;
   position: absolute;

}

img{
  width: 20%;
  margin-right: 550px;: 
}
nav ul{
  display: flex;
}
nav ul li{
  list-style: none;

}
nav ul li a{
  padding: 1rem 0;
  margin: 0 3rem;
  position: relative;
  letter-spacing: 2px;


}

nav ul li a: last child{
  margin-right: 0;
}




nav ul li a: hover{
 color: crimson;
}
html, body
{
    margin: 0px;
}
div.container{
margin: 0 auto;
  padding: 10em 3em;
  text-align: center;
}

div.container a
{
    color: crimson;
    text-decoration: none;
    font: 20px Raleway;
    margin: 0px 5px;
    padding: 5px 5px;
    position: relative;
    z-index: 0;
    cursor: pointer;
}

ul li a:before, ul li a:after{

    position: absolute;
    opacity: 0;
    width: 0%;
    height: 1px;
    content: '';
    background: crimson;
    transition: all 0.3s;
}

ul li a: before{
  left: 0px;
  top: 0px;

}

ul li a:after{
  right: 0px;
  bottom:0px;
}

ul li a:hover:before, ul li a:hover:after{
  opacity: 1;
  width: 100%;

}
ul li a:hover{
  color: crimson;
}

So I put an animation on my navigation bar and the animation touches the text a little too much i wanted to add more space between the text and the animation.

2

It would help to have the HTML or see a live version on something like Codepen.

I assume you are talking about the before/after pseudo-elements, if so, you can use the offset (top/right/bottom/left) to move the elements. But again, without the full code or a working example, it’s hard to give any good advice.

3

@lasjorghttps://codepen.io/_Unkown/pen/LYRyvvY

4

As I said, you can use the top/bottom offset to move the pseudo-elements (they accept negative values for valid units as well).

Your responsiveness is pretty broken though, I would start to fix that before coding any more new stuff. It will just get harder and harder the longer you wait. Maybe check out a few more tutorials and do some more simple practice projects as well (like just a bunch of navs). You are using positioning when you don’t need to and the fixed margin on the image is causing you issues.