fapchat
@fapchat

Как сделать такую границу при наведении на ссылку в хедере, сверху и — снизу?

5d6579ba0918a121234747.png
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="master.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900&display=swap&subset=cyrillic,cyrillic-ext,latin-ext" rel="stylesheet">
    <link rel="stylesheet" href="1.css">
   </head>
  <body>

<header>

<div>
  <svg width="220" height="100">
    <polyline points="0,0 0,40 60,100 160,100 220,40 220,0"  stroke="red" stroke-width="2" fill="rgb(25, 30, 25)"/>
    <text x="60" y="50" >Creative</text>

</svg>
</div>

<ul>
  <li><a href="#HOME">HOME</a></li>

  <li><a href="#ABOUT US">ABOUT US</a></li>

  <li><a href="#PORTFOLIO">PORTFOLIO</a></li>

  <li><a href="#CLIENTS">CLIENTS</a></li>

  <li><a href="#TEAM">TEAM</a></li>

  <li><a href="#SERVICES">SERVICES</a></li>

  <li><a href="#BLOG">BLOG</a></li>

  <li><a href="#CONTACT">CONTACT</a></li>

</ul>
</header>
<section>

</section>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

      <script src="style.js"></script>
      </body>
</html>

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
}
body{

  color: rgb(135, 135, 133);
overflow-x: hidden;
border-top: 3PX solid rgb(55, 60, 55)
}
header{
  height:70px;
  background: #001;
}
header ul{
  float: right;
  margin-top: 21px;
  margin-right: 75px;
}
header ul li {
  display: inline-block;
margin-right: 21px;
}
header ul li a{
text-decoration: none;
color: rgb(135, 135, 133);

}
header ul li a:hover::before{
  position:absolute;
    bottom:20px;
    left:0;
    width:10px;
    border-top:1px solid red;
    content:"";

}
header ul li a:hover::after{
  position:absolute;
    top:20px;
    left:0;
    width:30px;
    border-top:1px solid red;
    content:"";

}
header div{
display: inline-block;
margin-left: 70px;
position: relative;
bottom: 2px;

}
header svg text{
fill: #fff;
font-size: 1.5rem;

}

.white{
  color: #fff;
}


Граница при наведении на ссылку в хедере возникает возникает слева.5d657a301a795686485801.png
  • Вопрос задан
  • 157 просмотров
Решения вопроса 1
@kirkland
Fron-end Developer
Вот тебе черновой вариант, просто подгони под свой код
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы