我有這樣的html結構:

<div class="single-apartment-typology-text">
  <span class="title-apartment primary-title text-animated">
    <div class="title">Testing</div>
    <div class="uptitle">
      <span> last 3 opportunity</span>
    </div>
  </span>
</div>

我使用:before屬性添加了一個背景標題-公寓。我的目標是使uptitle中的范圍與邊框對齊，問題是當我改變分辨率時，內容沒有貼在右邊框上:

這是我的scss:

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

    .title {
       position: absolute;
       z-index: 2;
       display: block;
       left: 0;
     }

    &:before {
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-color: $yellow;
       left: 65px;
    }

    .uptitle {
        position: relative;
        z-index: 1;
        margin-right: 10px;
        background-color: $blue;
        color: #fff;
        padding: 10px;
        transform: translateX(33.8%);

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

我試圖使用translateX屬性將深藍色背景的span附加到右邊的黃色背景上，但到目前為止都沒有成功。

有什么辦法解決這個問題嗎？

因為您將:before偽元素右移了65px。uptitle元素不知道它在哪里，因為它是同級而不是子級。最簡單的方法是設置一個css自定義屬性來記錄:before偽元素移動了多遠。uptitle元素向右移動相同的量。如果我們使用right屬性，那么我們的參考點將是右邊框，但它必須是負值，然后將該元素向右移動。因此這里有calc。

下面標記的代碼

body {
  background: #BCB5AF;
}

.title-apartment {
  --left-shift: 65px; /* added this */
  position: relative;
  width: 400px;
  height: 100px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.title-apartment .title {
  position: absolute;
  z-index: 2;
  display: block;
  left: 0;
}

.title-apartment::before {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #E0CA36;
  left: var(--left-shift);
}

.title-apartment .uptitle {
  position: absolute; /*changed from relative to absolute */
  right: calc(-1 * var(--left-shift)); /*added this */
  z-index: 1;
  /*margin-right: 10px;  if you want this to be hard up agains the border then remove this. If you always want it to be 10px then keep it in */
  background-color: #444F5F;
  color: #fff;
  padding: 10px;
  
}

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

<div class="single-apartment-typology-text">
  <span class="title-apartment primary-title text-animated">
    <div class="title">Testing</div>
    <div class="uptitle">
      <span> last 3 opportunity</span>
    </div>
  </span>
</div>

不知道我是否理解這個問題，但測試，沒有它，你沒有空間

.uptitle {
        position: relative;
        z-index: 1;
        margin-right: 10px; // TO REMOVE
        background-color: $blue; 
        color: #fff;
        padding: 10px;
        transform: translateX(33.8%);

實現目標的一個方法是做到以下幾點:

設定寬度:20%；到。標題和 設置寬度:80%；到。標題-公寓::之前。 這能解決你的問題嗎？

見下面的片段或者JSFiddle。

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

.title-apartment .title {
  position: absolute;
  z-index: 2;
  display: block;
  left: 0;
  width: 20%;
}

.title-apartment::before {
  content: "";
  width: 80%;
  height: 100%;
  background-color: yellow;
  left: 65px;
}

.title-apartment .uptitle {
  position: absolute;
  right: 0;
  z-index: 1;
  background-color: blue;
  color: #fff;
  padding: 10px;
}

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

<div class="single-apartment-typology-text">
  <span class="title-apartment primary-title text-animated">
    <div class="title">Testing</div>
    <div class="uptitle">
      <span> last 3 opportunity</span>
</div>
</span>
</div>