위치 지정이없는 의사 요소 "캐럿"중심 지정

Question

일부 메뉴 항목에서 호버 스탯에 사용하는 작은 캐럿이 있습니다. 호버링은 단지 작은 캐럿을 추가하기 위해 의사 요소를 추가하는 menu-caret이라는 작은 클래스를 추가합니다.

carret에 대한 CSS는 너무과 같습니다

.menu-caret::before { 
    content:""; 
    position: absolute; 
    margin-left: 20px; 
    bottom: 0; 
    width: 0%; 
    height: 0; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-bottom: 5px solid black; 
} 

내가, 내가 메뉴 항목 크기/폭 동적 (각 캐럿을 중심 싶습니다되는 데 문제뿐만 아니라 유지 여기 장소 여기

에있는 호버 하위 메뉴의 무결성 (caret의 수정없이) IA 전체 작업 예이다 - 나는 이런 식으로 뭔가를 할 수 알고 http://codepen.io/ajmajma/pen/KgGxWL

:

은

ul { 
    width: 100%; 
    position: relative; 
    display: inline-block; 
    list-style-type: none; 
} 
li { 
    padding: 20px; 
    float: left; 
    position: relative; 
} 
.menu-caret::before { 
    content: ""; 
    position: absolute; 
    left: 50%; 
    bottom: 0; 
    width: 0%; 
    margin-left: -5px; 
    height: 0; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-bottom: 5px solid black; 
} 

그러나 상대 위치를 추가하면 하위 메뉴 크기가 엉망이됩니다 (페이지 너비는 100 % 여야 함). 내 하위 메뉴를 망치지 않고 가운데 맞춤 캐럿을 만들 수있는 방법이 있습니까?

Answer 1

캐럿을 만들 상대 컨테이너를 변경할 수 있습니다. 예를 들어, a 태그로 이동 :

.menu-caret > a::after { 
    content:""; 
    position: absolute; 
    left:50%; 
    margin-left: -5px; 
    bottom: -10px; 
    width: 0%; 
    height: 0; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-bottom: 5px solid black; 
} 
.menu > ul > li a { 
    position: relative; 
} 

CodepenDemo