Как текст сделать маркером?

Хочу сделать Skeleton для текста как в телеграмме когда вы переводите из англ на русский. Столкнулся с такой проблемой, что при добавление background к тегу p, он не становится маркировочным, а выделяет сразу весь блок. Как это решить? введите сюда описание изображения

<p>
  &nbsp;It’s getting warmer in Dubai, and my friends are leaving for fancy places like the south of France. As a French citizen, I agree that France is the best holiday destination 
  <br>
  <br>
  &nbsp;As the Telegram CEO though, I don’t take holidays. Instead, I keep working while meeting our users from unusual locations. This summer I’ve decided to check out Central Asia to see what life is like there, study how people use Telegram and what their digital needs are 
  <br>
  <br>
  &nbsp;I will keep you posted in this channel about my discoveries 
</p>
body {
  max-width: 450px;
}

* {
  margin: 0;
  padding: 0;
}

p {
  padding: 0 10px;
  display: inline-block;
  background-color: red;
}

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

Автор решения: BlackStar1991

Можна так сделать. Хотя правильнее б было распарсить перед отображением текст и проставить нужные теги.

p {
  background-color: #f00;
}

br {
  content: "" !important;
  display: block !important;
  background-color: #fff;
  height: 20px;
}
<p>
  &nbsp;It’s getting warmer in Dubai, and my friends are leaving for fancy places like the south of France. As a French citizen, I agree that France is the best holiday destination 
  <br>
  <br>
  &nbsp;As the Telegram CEO though, I don’t take holidays. Instead, I keep working while meeting our users from unusual locations. This summer I’ve decided to check out Central Asia to see what life is like there, study how people use Telegram and what their digital needs are 
  <br>
  <br>
  &nbsp;I will keep you posted in this channel about my discoveries 
</p>

→ Ссылка