列表项文本未填满行即换行至项目符号下方的CSS布局求助

不用原生的display: list-item和list-style-position，改用伪元素模拟项目符号，既能避免符号超出容器，又能让换行文本对齐项目符号右侧：

.list-item {
  background-color: gray;
  width: 100px;
  padding-left: 1.2em; /* 给项目符号留出空间 */
  position: relative;
  overflow-wrap: break-word;
}

.list-item::before {
  content: "•"; /* 模拟项目符号 */
  position: absolute;
  left: 0.2em; /* 控制符号与文本的间距 */
}

<div class="list-item">
  testlonglistitemtext
</div>

通过相对定位给容器左侧预留空间，用绝对定位的伪元素固定项目符号位置，文本会在预留空间右侧排列，换行时自然对齐到符号的水平位置，同时符号始终处于容器内部，不会超出范围。

内容的提问来源于stack exchange，提问作者bravesheeptribe