div의 테두리를 제거하는 동안 내비게이션 막대에 링크의 테두리 헤더를 어떻게 추가합니까?

이것은 현재 모습입니다. '액티브'클래스 요소 (즉,이 그림의 홈)에서 회색 테두리를 제거하고 오렌지색 테두리가 두꺼운 바운더리 테두리를 대체하고 싶습니다. 어떻게해야합니까?div의 테두리를 제거하는 동안 내비게이션 막대에 링크의 테두리 헤더를 어떻게 추가합니까?

* { 
 
    font-family: 'Asap', sans-serif; 
 
    margin: 0; 
 
} 
 

 
div.header { 
 
    background-color: rgba(0, 0, 0, 0.1); 
 
    position: absolute; 
 
    width: 100%; 
 
    border-bottom: solid rgba(0, 0, 0, 0.1) 2px; 
 
} 
 

 
div.header a.text { 
 
    text-decoration: none; 
 
    color: gray; 
 
    padding: 20px; 
 
    text-transform: capitalize; 
 
    float: left; 
 
    transition: 0.1s; 
 
} 
 

 
div.header a.text:hover { 
 
    color: rgba(0, 0, 0, 0.7); 
 
    background-color: rgba(0, 0, 0, 0.1); 
 
} 
 

 
div.header a.text.active { 
 
    color: #ff5e00; 
 
    border-bottom: solid #ff5e00;

<!DOCTYPE> 
 
<html> 
 
    <head> 
 
     <title>Ant Arni's Crappy Site!</title> 
 
     <link href="css/main.css" type="text/css" rel=stylesheet> 
 
     <link href="https://fonts.googleapis.com/css?family=Asap" rel="stylesheet"> 
 
    </head> 
 
    <body> 
 
     <div class=header> 
 
      <a href=# class="text active">Home</a> 
 
      <a href=# class=text>Members</a> 
 
      <a href=# class=text>Handbook</a> 
 
      <a href=# class=text>Apply</a> 
 
      <a href=# class=text>Staff</a> 
 
     </div> 
 
    </body> 
 
</html>

출처

2017-11-13 Ant Arni

당신은 after을 사용하고 .active 클래스

div.header a.text.active { 
    position: relative; 
} 

div.header a.text.active::after { 
    position: absolute; 
    bottom: -2px; 
    content: ''; 
    left: 0; 
    right: 0; 
    height: 3px; 
    background-color: #ff5e00; 
    z-index: 2; 
}

출처

2017-11-13 14:01:39 Sylwek

당신을 감사합니다! 하지만 왜? "after 요소"는 단순히 요소의 맨 위에 다른 요소를 추가하지만, 아래에 배치하고 높이를 3px로 변경하여 대체하는 것입니까? –

예. 전후 (https://developer.mozilla.org/pl/docs/Web/CSS/:after)에 새 요소가 추가됩니다. 나는 position : a.text.active에 상대적으로 추가했다. - 이것은 position absolute를 사용하기를 원하는 곳에서 "after element"를 배치 할 수있는 가능성을 제공한다. 왼쪽 : 0 AND 오른쪽 : 0은이 요소가 상대 위치의 상위 요소만큼 넓음을 의미합니다. – Sylwek

이 가장 쉬운 방법입니다에서 국경 바닥을 제거 할 수 있습니다. 활성 링크에 추가

margin: 0 0 -2px;

* { 
 
    font-family: 'Asap', sans-serif; 
 
    margin: 0; 
 
} 
 

 
div.header { 
 
    background-color: rgba(0, 0, 0, 0.1); 
 
    position: absolute; 
 
    width: 100%; 
 
    border-bottom: solid rgba(0, 0, 0, 0.1) 2px; 
 
} 
 

 
div.header a.text { 
 
    text-decoration: none; 
 
    color: gray; 
 
    padding: 20px; 
 
    text-transform: capitalize; 
 
    float: left; 
 
    transition: 0.1s; 
 
} 
 

 
div.header a.text:hover { 
 
    color: rgba(0, 0, 0, 0.7); 
 
    background-color: rgba(0, 0, 0, 0.1); 
 
} 
 

 
div.header a.text.active { 
 
    color: #ff5e00; 
 
    border-bottom: solid #ff5e00; 
 
    margin: 0 0 -2px; 
 
}

<!DOCTYPE> 
 
<html> 
 
    <head> 
 
     <title>Ant Arni's Crappy Site!</title> 
 
     <link href="css/main.css" type="text/css" rel=stylesheet> 
 
     <link href="https://fonts.googleapis.com/css?family=Asap" rel="stylesheet"> 
 
    </head> 
 
    <body> 
 
     <div class=header> 
 
      <a href=# class="text active">Home</a> 
 
      <a href=# class=text>Members</a> 
 
      <a href=# class=text>Handbook</a> 
 
      <a href=# class=text>Apply</a> 
 
      <a href=# class=text>Staff</a> 
 
     </div> 
 
    </body> 
 
</html>

출처

2017-11-13 14:02:16 Nick

사용 :psuedo elemnt :after 대신 직접의 당신이 원하는 경우 costum 위치. 여기

스 니펫 : 그것은 작동

div.header { 
 
    background-color: rgba(0, 0, 0, 0.1); 
 
    position: absolute; 
 
    width: 100%; 
 
    border-bottom: solid rgba(0, 0, 0, 0.1) 2px; 
 
} 
 

 
div.header a.text { 
 
    text-decoration: none; 
 
    position:relative; 
 
    color: gray; 
 
    padding: 20px; 
 
    text-transform: capitalize; 
 
    float: left; 
 
    transition: 0.1s; 
 
} 
 

 
div.header a.text:hover { 
 
    color: rgba(0, 0, 0, 0.7); 
 
    background-color: rgba(0, 0, 0, 0.1); 
 
} 
 

 
div.header a.text.active { 
 
    color: #ff5e00; 
 
} 
 
    
 
div.header a.text.active:after{ 
 
     content: " "; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 2px; 
 
    border-bottom: solid #ff5e00; 
 
    bottom: -2px; 
 
    left: 0; 
 
}

<div class=header> 
 
      <a href=# class="text active">Home</a> 
 
      <a href=# class=text>Members</a> 
 
      <a href=# class=text>Handbook</a> 
 
      <a href=# class=text>Apply</a> 
 
      <a href=# class=text>Staff</a> 
 
     </div>

출처

2017-11-13 14:05:21

div의 테두리를 제거하는 동안 내비게이션 막대에 링크의 테두리 헤더를 어떻게 추가합니까?

답변

관련 문제