Как сделать background размер по тексту

Question

У меня сейчас вот ето (фото 1). Мне надо чтоб фон был по размеру текста. Если я использую width текст делаеться не так как мне нужно (фото 2)

У меня код:

<li class="tester">
            <p class="${im} sended">${f.text}</p>
</li>

Использовать клас sended

Фото 1

Фото 2

Answer 1

Оберните в бокс и задайте боксу background-color: #000;
Вот к примеру как тут я накидал.

.box {
  background-color: #000;
  max-width: 400px;
  max-height: 400px;
  height: 500px;
  padding: 10px 90px; 
  box-sizing: border-box;
}
p {
  color: #fff;
  height: 30px;
}
.tester {
  position: relative;
}
.right {
  position: relative;
  left: 0;
}
.left {
  position: absolute;
  right: 0;
}
ul,
li {
    margin: 0;
    padding: 0;
    list-style: none;
}

<div class="box">
<li class="tester">
  <p class="${im} sended left">${f.text}</p>
  <p class="right">Lorem 111</p>
  <p class="left">Lorem 222</p>
  <p class="right">Lorem 333</p>
  <p class="left">Lorem 444</p>
  <p class="right">Lorem 555</p>
  <p class="left">Lorem 666</p>
</li>
</div>

БЛОГ НА HUSL

Как сделать background размер по тексту

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