Как сверстать правильно border?

Question

[whiteleaf]

Здравствуйте!

Я вот учу сейчас верстку, - набираюсь опыта, и у меня вот такой вот получился момент, решение которого я пока не нашел играясь с множеством догадок.

У меня есть меню. (код наверное выглядит пугающе)

<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;
}

Мне нужно чтобы при наведении на пункт меню появлялся border-bottom ровно по линии\border'у header'а, но получается если я ставлю line-height в высоту блока, то получается что линия скрывается.

Может я не совсем точно смог донести свои мысли, то нужно что-то похоже или вот такое-же как вот на этом сайте: https://medium.com/ .

Буду очень благодарен всем за помощь в моем начинании и любые подсказки и коррекции касательно моего "кода" не только по этому вопросу, а в общем.

и еще я долго игрался с позиционированием по горизонтали. Каким образом это более практично реализовывать?

Всем спасибо!!!

Answer 1

[Igor]

Можно использовать псевдо элемент ::before:

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

Comments

[whiteleaf]

Спасибо за отклик!

Я вот дописал вот этот код вот таким образом, но все равно видно что линия идет выше box-shadow header'a.

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

[whiteleaf]

[Igor]

Откорректируйте позицию, например, bottom: -2px; или top: 100%;. И у header убрать overflow: hidden;

Answer 2

[Глюкъ Виртуален]

Наверное где-то здесь:

<header>
            <nav class="content-nav">
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#somestuff">Some stuff</a></li>
                    <li><a href="#querylib">Query lib</a></li>
                    <li><a href="#Embeds">Embeds</a></li>
                    <li><a href="#Inspiration">Inspiration</a></li>
                    <li><a href="#contact">contact</a></li>
                    <li><a href="#about">about</a></li>
                </ul>  
            </nav>
        </header>

header {
height: 50px;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
margin-bottom: 40px;
}

.content-nav ul {
  padding: 0;
}

.content-nav ul li {
float: left;
list-style-type: none;
}

.content-nav ul li a {
display: block;
text-decoration: none;
margin: 0 10px;
text-transform: uppercase;
color: #303030;
font-family: "jaf-bernino-sans","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;
font-size: 0.7em;
letter-spacing: 1px;
line-height: 442%;
opacity: .5;
}

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

.content-nav ul li a:active {
  font-weight: bold;
  letter-spacing: 0.5px;
  border-bottom:2px solid black;
  opacity: 1;
}

Если будете менять шрифт, придется подобрать line-height и letter-spacing.

и еще я долго игрался с позиционированием по горизонтали. Каким образом это более практично реализовывать?

Вот уж не знаю. Зависит от задачи.

Answer 3

[Дмитрий]

Я в подобной ситуации для ссылки установил display: block и отравнял высоту по внешнему контейнеру, задал прозрачный border-bottom, а при наведении задавал ему цвет.
А позиционирование решал padding'ом.