CSS после селектора как эффект зажима над изображением

Question

Я попытался сделать в CSS «эффект зажима».

См изображения: https://s27.postimg.org/j6m72z5kj/h_transylvania.png

Я не знаю точно, как называется этот эффект, так что я назвал его «зажим эффект».

Может ли кто-нибудь сказать мне, почему :: после не работает? (Может иметь этот «эффект зажима» - см. Ссылку на изображение).

Мой код:

h2 { 
 
    margin-top: 40px; 
 
} 
 
.container { 
 
    background-color: #fff; 
 
    width: 250px; 
 
    height: auto; 
 
    padding: 20px; 
 
} 
 
img.mypicture { 
 
    width: 230px; 
 
} 
 
.recomandded { 
 
position: absolute; 
 
display: inline-block; 
 
top: 125px; 
 
left: 1px; 
 
color: #fff; 
 
background-color: #ff0047; 
 
font-size: 13px; 
 
font-weight: 700; 
 
font-family: Lato,Arial,sans-serif; 
 
padding: 3px 16px 3px 6px; 
 
border-radius: 4px 0 0 4px; 
 
box-shadow: 1px 2px 2px 0 rgba(0,0,0,0.4); 
 
} 
 
.recomandded::after { 
 
content: ""; 
 
display: inline-block; 
 
border: 6px solid #dd0843; 
 
border-bottom-color: transparent; 
 
border-right-color: transparent; 
 
position: absolute; 
 
top: 29px; 
 
left: 0; 
 
}

<div class="container"> 
 
<h2>Beautiful Flower</h2> 
 
<img class="mypicture" src="https://upload.wikimedia.org/wikipedia/commons/f/fe/Frangipani_flowers.jpg" /> 
 
<div class="recomandded">RECOMMENDED</div> 
 
</div>

Answer 1

Абсолютный элемент будет относиться к его родителей, только если это в не статический, по умолчанию, положение, поэтому я добавил position: relative в контейнер , в примере.

Я также исправил необходимые определения в соответствии с предоставленным образцом примера.

Вот неподвижная CSS:

h2 { 
    margin-top: 40px; 
} 
.container { 
    position: relative; 
    background-color: #fff; 
    width: 250px; 
    height: auto; 
    padding: 20px; 
} 
img.mypicture { 
    width: 230px; 
} 
.recomandded { 
position: absolute; 
display: inline-block; 
top: 125px; 
left: 8px; 
color: #fff; 
background-color: #ff0047; 
font-size: 13px; 
font-weight: 700; 
font-family: Lato,Arial,sans-serif; 
padding: 3px 16px 3px 6px; 
border-radius: 4px 0 0 4px; 
box-shadow: 1px 2px 2px 0 rgba(0,0,0,0.4); 
} 
.recomandded::after { 
content: ""; 
display: inline-block; 
border: 6px solid #dd0843; 
border-bottom-color: transparent; 
border-left-color: transparent; 
position: absolute; 
top: 20px; 
left: 0; 
} 

Или себе fiddle example

Надеются, что это помогает