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

Question

fapchat @fapchat

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

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

Граница при наведении на ссылку в хедере возникает возникает слева.

Вопрос задан более трёх лет назад
193 просмотра

Комментировать

Подписаться 1 Средний Комментировать

Решения вопроса 1

4 комментария

Andrey Vasilev @Nolis

Может лучше через after, before?
span вообще не смотрятся

Написано более трёх лет назад

fapchat @fapchat Автор вопроса

ну мне, конечно, никак не помогло...

<!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="223" height="101">
        <polyline points="2,0 2,40 60,100 160,100 220,40 220,0"  stroke=" rgb(200, 20, 30)" 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><span class="top"> </span><span class="bottom"></span>
        <a href="#CONTACT">CONTACT</a></li>

    </ul>
    </header>

  <section class="sec0">


<div class="div">
  <h1>why <span>Creative?</span></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi nostrum animi, iusto molestias fuga moles
  tiae minus explicabo cupiditate, inventore corporis. Esse tenetur commodi quidem beatae saepe et impedit, labore quibusdam.</p>
<div class="div1">
  <button type="button" name="button0" class="white">LOREM</button>
  <button type="button" name="button1" class="white">IPSUM</button>
</div>
</div>

</section >

<!--
<section class="sec2">



</section> -->


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

      <script src="style.js"></script>
      </body>
</html>
<code lang="css">
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
}
body{
font-weight: 400;
  color: rgb(135, 135, 133);
overflow-x: hidden;
border-top: 3PX solid rgb(55, 60, 55)
}
header{
  height:70px;
  background: rgba(0,0,0, 0.7);
}
span{
  color:  rgb(200, 20, 30);
}
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{
color: #fff;
}
/*
header ul li a:hover::before{
  position:absolute;
    bottom:20px;
    left:0;
    width:30px;
    border-top:1px solid  rgb(200, 20, 30);
    content:"";

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

} */
.top, .bottom{
  display: block;
  width: 50%;
  height: 3px;
  position: absolute;
  background-color: red;
  opacity: 0;
  transition: all 0.5s ease-out;
  left: 50%;
  transform: translateX(-50%)
}
.top{
  top: -10%;
}
.bottom{
bottom: -10%;
}
ul li:hover .top , ul li:hover .bottom{
  opacity: 1;
}
header div{
display: inline-block;
margin-left: 70px;
position: relative;
bottom: 2px;

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

}

.white{
  color: #fff;
}


.sec0{
background: url(img/1.jpg) no-repeat center/cover;
height: 100vh;
box-shadow: inset 10px 10px 100px 100px black;
text-align: center;
color: #fff;
}
.sec0 .div{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.sec0 .div1{
  margin-top: 2rem;
}
.sec0 .div1 button{

padding:7px 30px;
font-size: 1.1rem;
border: none;
outline: none;
background: #000;

}

.sec0 .div1 [name="button1"]{
  margin-left: 1.9rem;
}
.sec0 .div1 button:hover{
  cursor: pointer;

}
.sec0 .div1 button:active{
  background: rgb(200, 20, 30);

}

</code>

Написано более трёх лет назад

hzzzzl @hzzzzl

конечно лучше before/after

https://codepen.io/martinwolf/pen/eNNdme
https://codepen.io/brunob182/pen/rWxYmW

Написано более трёх лет назад
fapchat @fapchat Автор вопроса

hzzzzl, я бы отметил решением

Написано более трёх лет назад