角度CSS-根据条件移动文本位置

我这里有个闪电战- https://stackblitz.com/edit/angular-py9lmk?file=src%2Fapp%2Fapp.component.ts

它是一个简单的有角度的应用程序,有一个基本类型的进度条。

数量显示为红色条的百分比,带有黑色标记和显示数量的文本。

文本位于黑色标记的左侧。

我想把文字保持在一行。

当数量大于50时,我希望文本位于黑色标记的右侧-因此从0-50文本将位于标记的左侧,然后高于50文本将位于黑色标记的右侧

当文本应该在左侧或右侧时,我向标记添加了left和right类,但我无法计算如何将文本放置在黑色标记的正确一侧并将其保持在正确的位置。

*{
  margin: 0;
  padding: 0;
}

.main{
  position: relative;
  width: 400px;
}

.bar{
  background: lightgrey;
  width: 100%;
  height: 10px;
}

.inner-bar{
  background: red;
  height: 10px;
}

.marker{
  border-left: 2px solid black;
  font-family: sans-serif;
  font-size: 12px;
  left: 40%;
  padding: 20px 0 0 5px;
  position: absolute;
  top: -5px;
}

/* .marker-left{
  border-right: 2px solid black;
}

.marker-right{
  border-left: 2px solid black;
} */