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

Html – Positioning with after

I watched from 11:30-16:00 Frontend. As a result

    <div class="title-wrapper">
        <h2 class="title title--purple"><span>Live Auctions</span></h2>
    </div>

    .title {
        font-family: 'Oxanium',
        font-weight: 700;
        font-size: 64px;
        line-height: 130px;
        color: #F5FBF2;
        position: relative;

        &:after {
          content: '';
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%) translateX(-40%);
          background: #8613A5;
          width: 110px;
          height: 110px;
          border-radius: 50%;           
        }

        span {
          text-align: center;
          position: relative;
          z-index: 2;   
        }
    }

    .title-wrapper {
        display: flex;
        justify-content: center;
    }

produces the following screenshot

Live Auctions

How properties

      top: 50%;
      left: 0;
      transform: translateY(-50%) translateX(-40%);

allow you to highlight the letter L with a lilac circle, as in the screenshot? Show it in a picture.

I want that someone help me with layout.

Tags:

2

Answers


  1. 0
    • Initially, the top left of the circle is the same as the top left of the text block (block is highlighted yellow). Note, that line-height: 130px makes the block height much greater, than text height.
    .title {
  font-family: 'Oxanium', font-weight: 700;
  font-size: 64px;
  line-height: 130px;
  position: relative;
  background-color: yellow;
  &:after {
    content: '';
    position: absolute;
    /* top: 50%; */
    left: 0;
    /* transform: translateY(-50%) translateX(-40%); */
    background: #8613A5;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    opacity: 0.5;
  }
  span {
    text-align: center;
    position: relative;
    z-index: 2;
  }
}

.title-wrapper {
  display: flex;
  justify-content: center;
}
    <div class="title-wrapper">
  <h2 class="title title--purple"><span>Live Auctions</span></h2>
</div>
    • After top: 50% (50% is relative to the text block height) the circle is positioned vertically, so it’s upper point is in the middle of the text block.
    .title {
  font-family: 'Oxanium', font-weight: 700;
  font-size: 64px;
  line-height: 130px;
  position: relative;
  background-color: yellow;
  &:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    /* transform: translateY(-50%) translateX(-40%); */
    background: #8613A5;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    opacity: 0.5;
  }
  span {
    text-align: center;
    position: relative;
    z-index: 2;
  }
}

.title-wrapper {
  display: flex;
  justify-content: center;
}
    <div class="title-wrapper">
  <h2 class="title title--purple"><span>Live Auctions</span></h2>
</div>
    • After transform: translateY(-50%) (50% is relative to circle height) the circle is shifted vertically, so that it’s center is located at previous upper point location
    • translateX(-40%) shifts the circle horizontally, so that it’s moved to the left 40% of circle width.
    Login or Signup to reply.
  2. 0

    You have syntax error in your title class. I put your code below so we can see the output using run snippet. So what are you trying to achieve?

    body {
  background-color: gray;
  font-size: 14px;
  font-family: Arial;
}
.title {
     font-family: 'Oxanium';
     font-weight: 700;
     font-size: 64px;
     line-height: 130px;
     color: #f5fbf2;
     position: relative;
}
 .title:after {
     content: '';
     position: absolute;
     top: 50%;
     left: 0;
     transform: translateY(-50%) translateX(-40%);
     background: #8613a5;
     width: 110px;
     height: 110px;
     border-radius: 50%;
}
 .title span {
     text-align: center;
     position: relative;
     z-index: 2;
}
 .title-wrapper {
     display: flex;
     justify-content: center;
}
 
     <div class="title-wrapper">
        <h2 class="title title--purple"><span>Live Auctions</span></h2>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search