Разместить "значок" в правом верхнем углу текста

Question

Неожиданно столкнулся с проблемой в такой задаче. Есть блок фиксированной ширины. Внутри него может быть различного рода текст (динамический), как в одну, так и в две строки. Необходимо разместить "звездочку" в правом верхнем углу текста. Если текст в 2 строки, то в правом верхнем углу первой строки (непосредственно над окончанием слова). Пробовал и с помощью псевдоэлементов и с помощью дополнительного контейнера - не получается

.item {
  width: 100px;
  margin: 10px;
}
.txt{
  position: relative;
}
.required{
  color: red;
  position: absolute;
  top: -5px;
  right: -5px;
}

.pseudo{
  position: relative;
}
.pseudo:after{
  content: '*';
  color:blue;
  position: absolute;
  top: -5px;
  right: -5px;
}

<div class="item">
  <span class="txt">11111 <span class="required">*</span></span>
</div>
<div class="item">
  <span class="txt">2342342488 34288 <span class="required">*</span></span>
</div>

<div class="item">
  <span class="pseudo">11111</span>
</div>
<div class="item">
  <span class="pseudo">2342342488 34288</span>
</div>

Answer 1

.item {
  width: 100px;
  margin: 10px;
}

.pseudo{
  position: relative;
  display: inline-block;
}
.pseudo:after{
  content: '*';
  color:blue;
  position: absolute;
  top: -5px;
  right: 0;
}

<div class="item">
  <span class="pseudo">2342342488 34288</span>
</div>

БЛОГ НА HUSL

Разместить "значок" в правом верхнем углу текста

Ответы (1 шт):