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

希望它可以幫助