Выровняйте элемент CSS по левому нижнему углу, но все еще занимайте место

Question

У меня есть набор <div> элементов, которые должны иметь метки времени в конце.

<dl class="container">
   <dd time="5:30 PM">some text</dd>
   <dd time="5:35 PM">possibly very long text that takes up more than one line, long long long long long long long long long long long long long long long long</dd>
   <dd time="5:44 PM">or short</dd>
</dl>

Метки времени создаются с помощью псевдо ::after. Мне нужно, чтобы они занимали место внутри коробки, поэтому они не могут быть absolute, но они должны цепляться за левый нижний угол.

• Float не позволяет мне выравниваться по bottom.
• Поскольку это псевдо, я не могу дважды обернуть его, и более того, я бы действительно предпочел этого избежать, если это вообще возможно.
• Если бы я мог получить ::after чтобы занять оставшуюся ширину в последней строке, тогда я мог бы просто выровнять текст по правому краю, и это было бы хорошо, но я не смог найти способа заставить элемент занимать оставшееся пространство в последняя строка абзаца текста.
• block, table-footer-group и table-caption создают новую строку, а я хочу, чтобы отметка времени находилась на той же строке, если для этого есть место там.
• Возможно, есть решение для флекс-бокса, но то, что я пробовал до сих пор, кажется, всегда запутывает параграф текста выше

Answer 1

Вы указали, что flexbox был проблемой.

Это, похоже, решает проблему, но это то же самое, что и установка псевдоэлемента на display:block, как упоминалось в другом ответе.

dd {
  display: flex;
  flex-wrap: wrap;
  width: 80%;
  margin: 1em;
  border: 1px solid grey;
}

dd:after {
  content: attr(time);
  flex: 1 0 100%;
  background: lightblue;
}

<dl class="container">
  <dd time="5:30 PM">some text</dd>
  <dd time="5:35 PM">possibly very long text that takes up more than one line, long long long long long long long long long long long long long long long long</dd>
  <dd time="5:44 PM">or short</dd>
</dl>

Answer 2

Решение первое:

Применить display:block к элементу dd::after:

dd{
  border:1px solid black;
  width:200px;
  background-color:lightgreen;
}

dd::after {
  content: attr(time);
  display: block;
  margin-top:0.5em;
}

<dl class="container">
   <dd time="5:30 PM">some text</dd>
   <dd time="5:35 PM">possibly very long text that takes up more than one line, long long long long long long long long long long long long long long long long</dd>
   <dd time="5:44 PM">or short</dd>
</dl>

Вы также можете сделать это, включив в содержимое специальный символ "\A" и задав white-space: pre-wrap, но вам все равно придется настроить отображение блокировать, если вы хотите использовать поля или отступы:

dd{
  border:1px solid black;
  width:200px;
  background-color:lightblue;
}
dd::after {
  content:"\A " attr(time);
  white-space: pre-wrap;
}

<dl class="container">
   <dd time="5:30 PM">some text</dd>
   <dd time="5:35 PM">possibly very long text that takes up more than one line, long long long long long long long long long long long long long long long long</dd>
   <dd time="5:44 PM">or short</dd>
</dl>