CSS 삼각형이 페이지 하단에 표시됩니다.

Question

각 항목 아래에 삼각형이 표시되도록하고 싶습니다. 지금까지는 (비록 내가 어떻게 실제로 이해할 수는 없지만) 작동하지만 내 문제는 또한 아래쪽에 같은 삼각형이 표시됩니다 ... 나는 왜 그것을 얻지 않으며 나는 그것을 없앨 수 없습니다. 이 position: relative와 함께 첫 번째 부모로부터 위치를 취할 것입니다, 그래서 모든 깨달음은 매우 극명하게 될 것이다 , 여기,

.wrapper_icons { 
 
    list-style: none; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    padding-left: 0; 
 
} 
 
.wrapper_icons li { 
 
    border-bottom: 4px solid black; 
 
    flex: 3; 
 
    margin-right: 20px; 
 
} 
 
li:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 50%; 
 
    width: 0; 
 
    height: 0; 
 
    border: solid transparent; 
 
    margin-left: -11px; 
 
    border-width: 11px; 
 
    border-top-color: rgba(0, 0, 0, 0.2); 
 
} 
 
.wrapper_icons li:hover { 
 
    cursor: pointer; 
 
    cursor: hand; 
 
} 
 
.sink { 
 
    display: inline-block; 
 
    -webkit-transition-duration: 0.3s; 
 
    transition-duration: 0.3s; 
 
    -webkit-transition-property: -webkit-transform; 
 
    transition-property: transform; 
 
} 
 
.sink:hover { 
 
    -webkit-transform: translateY(5px); 
 
    -ms-transform: translateY(5px); 
 
    transform: translateY(5px); 
 
}

<ul class="wrapper_icons"> 
 
    <li class="sink">Lorem ipsum</li> 
 
    <li class="sink">Lorem ipsum</li> 
 
    <li class="sink">Lorem ipsum</li> 
 
</ul>

Answer 1

의사 요소 후 위치가 절대로 설정되어 내 코드입니다. 그래서 그러므로 목록 항목에 position: relative 추가 : 마우스를 가져 가면 당신은 단지 그것의 색깔을 의사 요소와 투명 삼각형을 만들고 변경할 수 있습니다

.wrapper_icons li 
{ 
    position: relative; 
    border-bottom:4px solid black; 
    flex:3; 
    margin-right:20px; 
} 

Answer 2

그 li

.wrapper_icons { 
 
    list-style: none; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    padding-left: 0; 
 
} 
 
.wrapper_icons li { 
 
    border-bottom: 4px solid black; 
 
    flex: 3; 
 
    margin-right: 20px; 
 
} 
 
li:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: calc(100% + 4px); 
 
    transform: translateX(-50%); 
 
    left: 50%; 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 7px 7px 0 7px; 
 
    border-color: transparent; 
 
    transition: all 0.3s ease-in; 
 
} 
 
.wrapper_icons li:hover { 
 
    cursor: pointer; 
 
} 
 
.sink { 
 
    transition: all 0.3s ease-in; 
 
} 
 
.sink:hover { 
 
    transform: translateY(5px); 
 
} 
 
.sink:hover:after { 
 
    border-top-color: rgba(0, 0, 0, 0.2); 
 
}

<ul class="wrapper_icons"> 
 
    <li class="sink">Lorem ipsum</li> 
 
    <li class="sink">Lorem ipsum</li> 
 
    <li class="sink">Lorem ipsum</li> 
 
</ul>