Question 170402 in Html Question posted in
Some basic documentation can be found here.

How to align background w/ content before in HTML?

I have this html structure:

<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>

I’ve added a background title-apartment using the :before property. My goal is have the span within uptitle aligned to the border, the problem’s that when I change the resolution the content doesn’t stick to the right border:

enter image description here

This is my 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;
      }
  }
}

I tried to keep the span with the dark blue background attached to the right yellow background using the translateX property, but no luck so far.

Any idea to fix this?

Tags:

3

Answers


  1. 0

    Since you’re shifting your :before pseudo element right by 65px, the .uptitle element doesn’t know where this is as it’s a sibling rather than a child. The easiest thing to do is to set up a css custom property to record how far you’re shifting the :before pseudo element then shift the .uptitle element right by the same amount. If we use the right property then our reference point will be the right border but it’ll have to be a negative value to then shift that element right. Hence the calc in there.

    Marked up code below

    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>

    P.S. I’ve assumed you want it hard up against the border hence I’ve removed the margin-right in the .title-apartment .uptitle rule but reinstate it if you want it always to be 10px from the edge.

    Login or Signup to reply.
  2. 0

    One way to achieve your goal is to do the following:

    • set width: 20%; to the .title and
    • set width: 80%; to the .title-apartment::before.

    Does this solve your problem?

    See the snippet below or 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>
    Login or Signup to reply.
  3. 0

    Not sure if I understood the problem but tested and without it you don’t have that space

     .uptitle {
        position: relative;
        z-index: 1;
        margin-right: 10px; // TO REMOVE
        background-color: $blue; 
        color: #fff;
        padding: 10px;
        transform: translateX(33.8%);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search