::之前和::縮放後甚至與絕對位置

Question

我正在嘗試做一個六邊形框分頁。我的問題是在::before和::after上的絕對位置，他們繼續受到父div中內容的影響。當數字有兩個符號時，它可以很好地工作，但只有一個符號或兩個以上的符號，::before和::after走向不同的方向。我怎樣才能解決這個問題？

這裏是我的問題的代碼示例：JSFiddle

Answer 1

它很容易與left: 0對準他們，而不是使用負margin-left值。

.pg_current { 
    position: relative; 
} 

.pg_current::before, 
.pg_current::after { 
    left: 0; 
    /* remove your margin-left you previously had */ 
} 

fiddle的更新示例。

Answer 2

雖然你已經說明了僞元素爲position:absolute你還沒有告訴他們在哪裏。

JSfiddle Demo

CSS

.pg_pagi { 
    margin: 20px 0 20px 0; 
    text-align: center; 
} 
.pg_current { 
    background: rgba(207, 158, 230, 0.5); 
    width: 27px; 
    height: 14px; 
    display: inline-block; 
    color: #ffffff; 
    padding: 0px 0 3px 0; 
    border-radius: 0px; 
    position: relative; 
} 

.pg_current::before { 
    content: ""; 
    position: absolute; 
    height:0; 
    width: 0px; 
    top:0; 
    left:0; 
    border-bottom: 9px solid rgba(207, 158, 230, 0.5); 
    border-left: 14px solid transparent; 
    border-right: 14px solid transparent; 
    margin-top: -9px ; /* same as bottom border*/ 
} 

.pg_current::after { 
    content: ""; 
    position: absolute; 
    height:0; 
    width: 0px; 
    top:100%; 
    left:0; 
    border-top: 9px solid rgba(207, 158, 230, 0.5); 
    border-left: 14px solid transparent; 
    border-right: 14px solid transparent; 
    position: absolute; 
    margin-bottom: 9px; /* same as top border */ 
}