Как удержать текст в центе при сжатии и position absolut?

Question

[Norwood]

При сжатии текст внутри кружков сдвигается влево. Можно ли его "удержать" в центре?
Интересует можно ли вообще такое сделать если да, то как?

<div class="pricing-card__wrap">
      <ul class="pricing-card pricing-card-green">
        <li class="pricing-card__title">Starte</li>
        <li class="pricing-card__price pricing-card__price-green">$125 <span class="pricing-card__period">Per Month</span></li>
        <li class="pricing-card__points">200GB Online Storage</li>
        <li class="pricing-card__points">20 Files Per Day</li>
        <li class="pricing-card__points">2TB Monthly Bandwidth</li>
        <li class="pricing-card__points check">Secure Platform</li>
        <li class="pricing-card__points check">24/7 Customer Support</li>
        <li class="pricing-card__points check">Fast & Reliable</li>
        <li class="pricing-card__points">
          <a class="pricing-card__btn pricing-card__btn-green" href="#">Get Started</a></li>
      </ul>
      <ul class="pricing-card pricing-card-red">
        <li class="pricing-card__title">Ultimate</li>
        <li class="pricing-card__price pricing-card__price-red">$195 <span class="pricing-card__period">Per Month</span></li>
        <li class="pricing-card__points">200GB Online Storage</li>
        <li class="pricing-card__points">20 Files Per Day</li>
        <li class="pricing-card__points">2TB Monthly Bandwidth</li>
        <li class="pricing-card__points check">Secure Platform</li>
        <li class="pricing-card__points check">24/7 Customer Support</li>
        <li class="pricing-card__points check">Fast & Reliable</li>
        <li class="pricing-card__points">
          <a class="pricing-card__btn pricing-card__btn-red" href="#">Get Started</a></li>
      </ul>

      <ul class="pricing-card pricing-card-violet">
        <li class="pricing-card__title">Professional</li>
        <li class="pricing-card__price pricing-card__price-violet">$145 <span class="pricing-card__period">Per Month</span></li>
        <li class="pricing-card__points">200GB Online Storage</li>
        <li class="pricing-card__points">20 Files Per Day</li>
        <li class="pricing-card__points">2TB Monthly Bandwidth</li>
        <li class="pricing-card__points check">Secure Platform</li>
        <li class="pricing-card__points check">24/7 Customer Support</li>
        <li class="pricing-card__points check">Fast & Reliable</li>
        <li class="pricing-card__points">
          <a class="pricing-card__btn pricing-card__btn-violet" href="#">Get Started</a></li>
      </ul>
    </div>

.pricing-card__wrap {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    justify-content: space-between;

    .pricing-card {
      background-color: white;
      flex: 0 0 31%;
      min-width: 260px;
      margin-top: 10px;
      padding-top: 40px;
      box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05);

      .pricing-card__title {
        font-weight: 500;
        font-size: 1.33rem;
        color: $colorBlackLight;
        padding: 10px 0 50px;
      }

      .pricing-card__price {
        position: relative;
        color: white;
        z-index: 1;
        font-size: 1.66rem;

        .pricing-card__period {
          display: block;
          font-size: .86rem;
          padding: 5px 0 70px;
        }

        &::after {
          z-index: -1;
          content: "";
          top: -28px;
          //left: 35%;
          left: calc(100% - 65%);
          position: absolute;
          display: inline-block;
          min-height: 100px;
          min-width: 100px;
          border-radius: 50%;
          box-shadow: inset 0 0 0 5px;
          background-color: #fc5f45;
          border: 3px solid #fc5f45;
        }
      }

      .pricing-card__price-green {
        &::after {
          background-color: $colorGreen;
          border: 3px solid $colorGreen;
        }
      }

      .pricing-card__price-violet {
        &::after {
          background-color: $colorViolet;
          border: 3px solid $colorViolet;
        }
      }

      .pricing-card__price-red {
        &::after {
          background-color: $colorRed;
          border: 3px solid $colorRed;
        }
      }


      .pricing-card__points {
        font-size: 1rem;
        padding-bottom: 25px;
        color: $colorGrayLight;

      }

      .pricing-card__btn {
        text-transform: uppercase;
        font-size: 1.066rem;
        font-weight: 700;
        display: inline-block;
        padding: 20px 40px;
        border-radius: $radius;
        color: $colorWhite;

        &:hover {
          background-color: transparent;
          transition: all .5s linear;
        }
      }


      .pricing-card__btn-green {
        border: 1px solid $colorGreen;
        background-color: $colorGreen;

        &:hover {
          color: $colorGreen;
        }
      }

      .pricing-card__btn-red {
        border: 1px solid $colorRed;
        background-color: $colorRed;

        &:hover {
          color: $colorRed;
        }

      }

      .pricing-card__btn-violet {
        border: 1px solid $colorViolet;
        background-color: $colorViolet;

        &:hover {
          color: $colorViolet;
        }
      }

    }

    .pricing-card-green {
      border-top: 3px solid $colorGreen;
    }

    .pricing-card-red {
      border-top: 3px solid $colorRed;
    }

    .pricing-card-violet {
      border-top: 3px solid $colorViolet;
    }

    .pricing-card:not(:last-child) {
      margin-right: 15px;
    }
  }

Comments

[Ankhena]

Можно было просто загуглить "absolute центрирование".

left: 50%;
transform: translateX(-50%);

Для вертикали аналогично.

Только сейчас для этого есть гриды. И абсолют становится лишним.

Но и грид там тоже лишний, просто потому что лишний псевдоэлемент. Вы вполне можете border и box-shadow задать прямо для pricing-card__price.

И, пожалуйста, уберите дурацкую вложенность. У вас же БЭМ.

[Norwood]

Ankhena, всё понял кроме:
"И, пожалуйста, уберите дурацкую вложенность. У вас же БЭМ."
что я не так делаю?

[Ankhena]

Norwood, откройте файл CSS и скажите, зачем вам такие вложенные селекторы?
Например,

.pricing-card__wrap .pricing-card .pricing-card__title {...}

Этого .pricing-card__title {...} достаточно.

[Ankhena]

Norwood, а ещё почитайте про кастомные свойства, не нужно будет 100 раз рассказывать про border-top border-top: 3px solid $colorRed;. Будете только цвет менять. https://jsfiddle.net/Ankhena/Lfpw4x3d/

[Norwood]

.pricing-card__wrap - flex контейнер
.pricing-card- для размещения 3-х карточек в ряд (просто дочерние элементы .pricing-card__wrap)
.pricing-card__title- для задания стилей заголовка
Если честно, то не понимаю как можно обойтись только одним .pricing-card__title?

[Norwood]

Ankhena, это что-то типа миксина?

[Ankhena]

Norwood,

Если честно, то не понимаю как можно обойтись только одним .pricing-card__title?

Зачем ему тройная вложенность селектора?

Я не говорю, что класс один должен быть.
Только не вкладывайте их друг друга в стилях. Не нужно вам это тут.

[Norwood]

Ankhena, аа... понля, исправлю! Спасибо большое за помощь!