modification of the text in the content-CodePudding

Hello everyone I would like to center my text unfortunately I do not know if there is a class to put this

the actual result

the current code

.discount {
  &::before {
    content: 'Super BOLK  1,90€';
    color: #FFD652;
    position: absolute;
    top: -22px;
    right: -22px;
    width: 83.85px;
    height: 82.21px;
    border-radius: 50%;
    background-color: var(--primary-color);
    transform: rotate(30deg);
    font-size: 15px;
    margin: 5px;
    border-width: 0 0.3em 0.25em 0;
  }
}

the result I want

CodePudding user response：

may be that...

.discount {
  --primary-color : #298a29;
  display         : inline-block;
  padding         : 0;
  font-size       : 0;
  position        : relative;
  font-family     : Arial, Helvetica, sans-serif;
  }
.discount::before {
  content          : ' ';
  position         : absolute;
  top              : 5px;
  right            : 5px;
  width            : 83.85px;
  height           : 82.21px;
  border-radius    : 50%;
  background-color : var(--primary-color);
  }
.discount::after {
  position         : absolute;
  top              : 18px;
  right            : 12px;
  content          : 'SUPER BOLK  1,90€';
  text-align       : center;
  color            : #FFD652;
  width            : 83.85px;
  height           : 82.21px;
  transform        : rotate(30deg);
  font-size        : 15px;
  text-align       : center;
  }

<div class="discount">
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="
      width="300" height="400">
</div>