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 */
}

::之前和::甚至在绝对位置后缩放

2 个答案: