如何在不为.item-class设置内边距/外边距的情况下调整伪元素宽度

嘿，这个需求其实很容易实现，核心思路就是让伪元素自己控制自身的宽度和位置，完全不用碰父元素.item-class的内边距或外边距。下面给你几种靠谱的实现方案：

方案1：绝对定位 + 左右偏移（最推荐，兼容性拉满） #

这种方法利用绝对定位的特性，直接给伪元素设置左右偏移量，自动计算宽度，代码简洁还灵活。

HTML结构 #

<div class="item-class">这是需要加边框的内容</div>

CSS代码 #

.item-class {
  position: relative; /* 给伪元素提供定位基准 */
  /* 这里完全不用设置padding或margin */
  /* 可以加一些基础样式方便看效果 */
  font-size: 18px;
  padding: 0; /* 明确去掉默认padding，可选 */
  margin: 0; /* 明确去掉默认margin，可选 */
}

/* 以底部边框为例，其他方向同理 */
.item-class::after {
  content: ''; /* 伪元素必须的属性 */
  position: absolute;
  left: 20px;   /* 左侧留20px空白 */
  right: 20px;  /* 右侧留20px空白 */
  bottom: 0;    /* 定位到父元素底部 */
  height: 2px;  /* 边框厚度 */
  background-color: #2196F3; /* 边框颜色 */
}

原理：父元素设为relative后，伪元素的绝对定位会相对于父元素计算位置。设置left:20px和right:20px后，伪元素的宽度会自动等于父元素宽度减去40px，完美实现两侧留白。如果要做顶部边框，把bottom:0改成top:0就行。

方案2：calc计算宽度 + 左偏移 #

如果你更习惯明确设置宽度，也可以用calc()函数直接计算伪元素的宽度：

.item-class {
  position: relative;
}

.item-class::after {
  content: '';
  position: absolute;
  left: 20px;
  width: calc(100% - 40px); /* 父元素宽度减去左右各20px */
  bottom: 0;
  height: 2px;
  background-color: #2196F3;
}

这种效果和方案1完全一样，只是用width属性明确指定了宽度，适合喜欢精确控制的场景。

方案3：Flex布局实现（无需定位） #

如果你的父元素刚好是Flex布局，也可以用margin来实现留白：

.item-class {
  display: flex;
  flex-direction: column; /* 垂直排列内容和伪元素 */
  /* 同样不设置padding/margin */
}

.item-class::after {
  content: '';
  margin: 0 20px; /* 左右各留20px空白 */
  height: 2px;
  background-color: #2196F3;
}

原理：Flex子元素的margin会自动占据空间，伪元素作为Flex子元素，宽度会自动填充父元素减去左右margin后的空间，同样不需要修改父元素的padding/margin。

以上三种方案都能满足你的需求，根据你的布局场景选就行～

内容的提问来源于stack exchange，提问作者silversurfer