带换行的 CSS Flex。中间但不在行尾的装饰物品[重复]

Question

我有一个<ul> 和多个<li>。我设置了以下样式：

列表样式：无； 文本对齐：居中； 显示：弯曲； 弹性包装：换行； 证明内容：中心； 差距：1rem 2rem;

每个<li> 上还有一个伪:after，其样式如下：

content: "";
    display: block;
    width: 0.5em;
    height: 0.5em;
    aspect-ratio: 1/1;
    background-color: var(--color-gothic);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -1.25em;

这给了我每个项目之间的一个小圆圈。这纯粹是装饰性的。

我真的不认为有解决方案，但我想我会问，以防万一有人有任何天才的脑电波。

我想要的是装饰点出现在项目之间，但如果它是一行中的最后一个项目，则不会出现在项目之后。

这有意义吗？

Answer 1

是的，有一个解决方案，您可以使用以下方法，它将样式应用于除最后一个子元素之外的所有元素。

li:not(:last-child)::after {
    content: "";
    display: block;
    width: 0.5em;
    height: 0.5em;
    aspect-ratio: 1/1;
    background-color: var(--color-gothic);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -1.25em;
}