文本换行时before伪元素图标缩小问题的原因及修复咨询

当容器内文本换行后，通过:before伪元素实现的圆形头像图标尺寸会小于CSS中指定的36px。

原因分析 #

父元素.initial使用了display: flex布局，:before伪元素作为flex子元素，默认的flex-shrink属性值为1。当容器内文本换行导致空间分配变化时，flex子元素会被自动压缩，即使设置了固定的width和height，也无法保持原有尺寸。

修复方法 #

给:before伪元素添加flex-shrink: 0，禁止其被压缩；或者直接设置flex: none（等同于flex-grow:0; flex-shrink:0; flex-basis:auto），确保伪元素始终保持设置的宽高。

修改后的CSS代码 #

.initial {
  align-items: center;
  display: flex;
  font-size: 12px;
  margin: 10px 0px 10px 0px;
}

.initial::before {
  content: attr(data-initials);
  align-items: center;
  display: flex;
  justify-content: center;
  background-color: #111111;
  border-radius: 100%;
  color: #ffffff;
  height: 36px;
  letter-spacing: 1px;
  line-height: 12px;
  margin-right: 10px;
  text-transform: uppercase;
  width: 36px;
  flex-shrink: 0; /* 添加此行禁止伪元素被压缩 */
}

测试用HTML代码 #

<div class="row">
  <div data-initials="A" class="col-md-6 initial">
    This is a smaller text.
  </div>
</div>

<div class="row">
  <div data-initials="A" class="col-md-6 initial">
    This ist a very long text. This ist a very long text. This ist a very long text. This ist a very long text. This ist a very long text. This ist a very long text. This ist a very long text. This ist a very long text. This ist a very long text. This ist a very long text.
  </div>
</div>

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