Блог

Я пытаюсь добавить значок после текста последнего абзаца, который я добавляю с помощью JavaScript. Моя проблема в том, что длина текста последнего абзаца варьируется, и, исходя из того, как мой текущий стиль размещения значка в строке, он работает только для одной определенной длины. Если бы абзац был на несколько слов длиннее, значок появлялся бы над текстом, например:

Как я могу оформить значок и текст так, чтобы они появлялись в конце каждого абзаца независимо от длины? На данный момент я использую position absolute при настройке положения правого и верхнего полей.

Вот свойства CSS, которые я использую для этого примера:

 .paragraph {
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 140%;
letter-spacing: .5px;
color: #333;
padding: 15px 0 5px 0;
}

.icon-lock {
position: absolute;
right: 54%;
margin-top: -30px;
}
  

Я ожидаю, что значок появится в конце абзаца независимо от длины, не перекрываясь с выводом текста.

Вот ссылка на пример jsfiddle

Вместо абсолютного позиционирования значка я бы поместил текст внутри <p> и поместил .icon-lock на тот же уровень, а затем добавил display: inline как к новому <p> , так и к .icon-lock . Таким образом, значок всегда будет располагаться рядом с концом абзаца.

Рабочий пример:https://jsfiddle.net/nkg1269x/9 /

     .paragraph {
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 140%;
letter-spacing: .5px;
color: #333;
padding: 15px 0 5px 0;
position:relative;
}
.paragraph::after{
  content: '1F516';
  position:absolute;
  bottom:5px;
  padding-left:10px;
}