时间戳

首页 > 解决方案 > 如何在 div 中居中伪元素 ::after 边框？

html - 如何在 div 中居中伪元素 ::after 边框？

问题描述

我要问你。我正在尝试使用伪元素（之后）创建边框。我想在我创建的 div 框的中间放置一个边框，而不设置（顶部，底部）和（左，右）。中间可以自动化吗？

我的密码笔

<div class="box">
</div>

.box{
  height:500px;
  width:300px;
  background-color:red;
  position:relative;
  
  &::after{
    content:'';
    position:absolute;
    border:2px solid #fff;
    height:90%;
    width:90%;
  }
}

标签： htmlcsssasscss-selectors

解决方案

我已经使用百分比top和left而不是更正定位，transform: translate(-50%, -50%);所以它在中间

.box{
  height:500px;
  width:300px;
  background-color:red;
  position:relative;
 
}

.box::after{
    content:'';
    position:absolute;
    border:2px solid #fff;
    height:90%;
    width:90%;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
  }
<div class="box"></div>

推荐阅读