Неожиданно столкнулся с проблемой в такой задаче. Есть блок фиксированной ширины. Внутри него может быть различного рода текст (динамический), как в одну, так и в две строки. Необходимо разместить "звездочку" в правом верхнем углу текста. Если текст в 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>