Как абсолютное положение: перед псевдоэлементом дочернего элемента относительно родителя?

Question

Вот fiddle.

У меня есть два элемента div.

<div class="parent"> 
    <div class="child"> 
    </div> 
</div> 

И код CSS для этого.

.parent { 
    height: 20px; 
    width: 100px; 
    background-color: #080; 
    position: relative; 
} 

.child { 
    position: absolute; 
    width: 80px; 
    height: 200px; 
    background-color: #008; 
    right: -10px; 
    top: 30px; 
} 

.child:before { 
    border-right: 10px solid transparent; 
    border-bottom: 10px solid #008; 
    border-left: 10px solid transparent; 
    top: -10px; 
    width: 0; 
    height: 0; 
    content: ""; 
    position: absolute; 
    left: 50%; 
} 

Как позиционировать .child:before, связанные с .parent без JS. Я знаю решение с .parent:before, но это не хорошо для меня.

Answer 1

Я думаю, что это то, что вы пытаетесь сделать.

Я думаю, вы найдете это более надежным и масштабируемым.

.parent { 
 
    height: 20px; 
 
    width: 100px; 
 
    background-color: #080; 
 
    position: relative; 
 
} 
 
.child { 
 
    position: absolute; 
 
    width: 80px; 
 
    height: 200px; 
 
    background-color: #008; 
 
    left: 50%; 
 
    /* note 50% */ 
 
    top: 30px; 
 
    margin-left: -20px; 
 
    /* 2x your arrow size */ 
 
} 
 
.child:before { 
 
    position: absolute; 
 
    border-right: 10px solid transparent; 
 
    border-bottom: 10px solid #008; 
 
    border-left: 10px solid transparent; 
 
    top: -10px; 
 
    /* your border size */ 
 
    margin-left: 10px; 
 
    /* your border-size */ 
 
    width: 0; 
 
    height: 0; 
 
    content: ""; 
 
    left: 0; 
 
}

<div class="parent"> 
 
    <div class="child"> 
 
    </div> 
 
</div>

Answer 2

Вы можете позиционировать только элемент absolute ly относительно ближайшего родителя, который сам позиционируется. В вашем случае это .child.

Если .child и .child:before не связаны в макете, почему бы не поставить .child:before в родительский элемент, либо как .parent:before, или как его собственный элемент?

В качестве альтернативы, если ваши элементы имеют фиксированную ширину, как в вашем примере, просто укажите псевдоэлемент как фиксированное положение пикселя. Demonstration.