How to make a correct border?

Question

css

Hello!
I'm learning layout now - I'm gaining experience, and I got such a moment, the solution of which I have not yet found while playing with a lot of guesses.
I have a menu. (the code looks scary)

<header>
            <div class="content-logo"><span>Matthew Greenberg</span></div>
            <nav class="content-nav">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Some stuff</a></li>
                    <li><a href="#">Query lib</a></li>
                    <li><a href="#">Embeds</a></li>
                    <li><a href="#">Inspiration</a></li>
                    <li><a href="#">contact</a></li>
                    <li><a href="#">about</a></li>
                </ul>  
            </nav>
        </header>

header {
  height: 70px;
  -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2);
  overflow: hidden;
}

.content-nav {
  position: relative;
  z-index: 1;
}

.content-nav ul {
  padding: 0;
  margin:0;
  color:white;
  position: relative;
  z-index: 10;
  overflow: visible;
}

.content-nav ul li {
  display: inline-block;
  color: white;
  line-height: 70px;
  position: relative;
}

.content-nav ul li:hover {
  border-bottom:2px solid black;
  opacity: 1;
}
.content-nav ul li a {
  position: absolute;
  display: block;
  padding-left: 5px;
  text-decoration: none;
  color: #303030;
  font-family: "Lato";
  /*height: 100%;*/
  opacity: .5;
}

.content-nav ul li a:hover {
  border-bottom:2px solid black;
  opacity: 1;
}

I need the border-bottom to appear exactly along the \border line of the header when hovering over the menu item, but it turns out that if I set the line-height to the height of the block, it turns out that the line is hidden.
Maybe I wasn’t quite able to convey my thoughts, then you need something similar or just the same as on this site: https://medium.com/ .
I would be very grateful to everyone for help in my undertaking and any tips and corrections regarding my "code" not only on this issue, but in general.
and I also played with horizontal positioning for a long time. How it is more practical to implement?
Thanks to all!!!

Answer 1

You can use a pseudo element ::before:

.content-nav a {
     position: relative;
}
.content-nav a:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: #000;
}