如何使:before背景与uptitle内容正确对齐，适配不同分辨率？

问题根源 #

你使用了固定的transform: translateX(33.8%)硬编码值，同时伪元素的left:65px也是固定像素，这两个值在分辨率变化时无法自适应容器宽度，导致.uptitle无法始终对齐黄色背景的右边界。

解决方案 #

我们可以通过动态定位 + 自适应比例来实现稳定对齐，以下是两种可行的调整方案：

方案一：用绝对定位+translateX自适应对齐

直接通过位移比例让.uptitle紧贴黄色背景右边缘，完全适配容器宽度变化：

.title-apartment {
    position: relative;
    width: 400px;
    height: 100px;
    display: flex;
    align-items: center;

    .title {
       position: absolute;
       z-index: 2;
       left: 0;
       width: 65px; /* 固定宽度，确保黄色背景起始位置稳定 */
     }

    &:before {
       content: "";
       position: absolute;
       top: 0;
       left: 65px;
       right: 0; /* 让黄色背景从65px处延伸到容器右边缘 */
       height: 100%;
       background-color: $yellow;
    }

    .uptitle {
        position: absolute;
        z-index: 1;
        right: 0;
        background-color: $blue;
        color: #fff;
        padding: 10px;
        /* 向右移动自身宽度，让左边缘紧贴黄色背景右边界 */
        transform: translateX(100%);

       span {
         display: block;
         font-size: 10px;
         font-weight: 600;
         text-transform: uppercase;
         line-height: 23px;
      }
  }
}

方案二：用CSS变量联动元素宽度

如果需要更精细的控制，可以用CSS变量存储.uptitle的宽度，让伪元素动态适配：

.title-apartment {
    position: relative;
    width: 400px;
    height: 100px;
    display: flex;
    align-items: center;

    .title {
       position: absolute;
       z-index: 2;
       left: 0;
       width: 65px;
     }

    &:before {
       content: "";
       position: absolute;
       top: 0;
       left: 65px;
       /* 黄色背景宽度 = 容器宽度 - title宽度 + uptitle总宽度 */
       width: calc(100% - 65px + var(--uptitle-total-width));
       height: 100%;
       background-color: $yellow;
    }

    .uptitle {
        position: absolute;
        z-index: 1;
        right: 0;
        background-color: $blue;
        color: #fff;
        padding: 10px;
        /* 存储元素总宽度（自身宽度+左右padding） */
        --uptitle-total-width: calc(100% + 20px);

       span {
         display: block;
         font-size: 10px;
         font-weight: 600;
         text-transform: uppercase;
         line-height: 23px;
      }
  }
}

响应式适配说明 #

如果要让容器支持自适应宽度（比如去掉width:400px改用百分比），只需要把.title的宽度改成相对单位（例如width:15%），伪元素的left对应改成15%即可，整个布局会自动适配不同分辨率。

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