::after 和 ::before 的缩放问题

Question

我使用仅在角落显示的选择器创建了边框效果，如下面的 sn-p 所示。

html {
    box-sizing: border-box !important;
}
*, *:before, *:after {
    box-sizing: inherit;
}
.ix-border{
    position: relative;
    padding: 0;
    margin: 0;
    border-style: solid;
    display: inline-block;  
    border-width: 1px; 
    background-color: transparent;
    border-color: #A00;
}
.ix-border, .ix-border:hover, .ix-border:before, .ix-border:after{
    transition: 0.42s;
}
.ix-border:before, .ix-border:after{
    content:'';
    position:absolute;
    padding: 0;
    margin: 0;
    border-style: solid;
    display: inline-block; 
    border-width: 1px;
    background-color: transparent;
    border-color: #FFF;
}
.ix-border:before{
    top: 8px; right:-1px; bottom: 8px; left:-1px; 
    border-width: 0 1px 0 1px;
}
.ix-border:after{
    top:-1px; right: 8px; bottom:-1px; left: 8px; 
    border-width: 1px 0 1px 0;
}
.ix-border:hover{
    border-color: #F00;
}
.ix-border:hover:before{
    top: 16px; bottom: 16px;
    border-width: 0 1px 0 1px;
}
.ix-border:hover:after{
    right: 16px; left: 16px; 
    border-width: 1px 0 1px 0;
}

.elmt{
    width: 120px;
    height: 60px;
    text-align: center;
    line-height: 60px;
}

<div class="elmt ix-border">
  Hello World
</div>

但是，我注意到在执行缩放时，应该由 ::before/::after 选择器边框隐藏的元素边框有时会在一侧或两侧随机可见，具体取决于缩放因素和导航器。

我添加了box-sizing:border box，以便在缩放计算中包含边框，正如here 建议的那样，但它仍然没有修复。

那么，我错过了什么吗？是否有任何 hack 来修复它或任何其他方式（仅限 css）来达到相同的效果？

Answer 1

这是一个非常好的问题，但我认为仅使用伪元素和 CSS 真的很难做到，所以我会建议使用像这样的真正 html 元素的替代方法，所以现在你可以避免这个问题，但有一个额外的 @ 987654322@元素:(

.corners {
  position: relative;
  height: 150px;
  padding: 10px;
  position: relative;
  text-align: center;
  width: 150px;
  padding: 10px;
  line-height:150px;
  font-size:16px;
}

.top, .bottom {
  position: absolute;
  width: 10px;
  height: 10px;
}

.top {
  top: 0;
  border-top: 1px solid;
}

.bottom {
  bottom: 0;
  border-bottom: 1px solid;
}

.left {
  left: 0;
  border-left: 1px solid;
  transition: all 0.42s;
}

.right {
  right: 0;
  border-right: 1px solid;
  transition: all 0.42s;
}

.corners:hover .right{
 width:20px;
 height:20px;
 border-color:red;
}

.corners:hover .left{
 width:20px;
 height:20px;
 border-color:red;
}

<div class="corners">
  <div class="top left"></div>
  <div class="top right"></div>
  <div class="bottom right"></div>
  <div class="bottom left"></div>
  content goes here
</div>

好的，这是我对这个问题的另一个看法，这次我只使用了 3 个 html 元素

div {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 20px;
    text-align:center;
	line-height: 100px;
}
div div:before {
    display: block;
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: -10px;
    left: -10px;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
	transition: all 0.42s;
}

div div:after {
    display: block;
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: -10px;
    right: -10px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
	transition: all 0.42s;
}


div div {
    margin: 0;
    position: absolute;
    top: 0;
}


span:before {
    display: block;
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: -10px;
    left: -10px;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
	transition: all 0.42s;
}

span:after {
    display: block;
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: -10px;
    right: -10px;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
	transition: all 0.42s;
}

div:hover span:after{
 width:30px;
 height:30px;
 border-color:red;

}

 div:hover span:before{
 width:30px;
 height:30px;
 border-color:red;
}

div:hover div:before{
 width:30px;
 height:30px;
 border-color:red;  
}

div:hover div:after{
width:30px;
height:30px;
border-color:red;  
}

<div>some content<div></div><span></span></div>