Css ：after节点不可见，带有文本溢出省略号

我试图显示一个指示符（橙色点），表示列表项上发生了操作。我还使用了溢出：隐藏和

文本溢出：省略号以处理文本溢出

我面临的问题是，当文本溢出发生时，指示器不可见


.root{
宽度：200px；
边框：1px纯黑；
}
保险商实验室{
保证金：0；
填充：0；
列表样式类型：无；
}
李{
边框底部：1px纯色灰色；
显示器：flex；
}
李：姓名{
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}
李：姓名：后{
内容：''；
显示：内联块；
宽度：6px；
高度：6px；
背景：橙色；
}



这是一个


这是一个


这是一个


这篇长文章在这里


这是因为当有长文本时，橙色点位于文本的末尾。您可以通过将
位置：绝对
指定给
：after
元素来验证这一点。

你可以这样做来避免这种情况


.root{
宽度：200px；
边框：1px纯黑；
}
保险商实验室{
保证金：0；
填充：0；
列表样式类型：无；
}
李{
边框底部：1px纯色灰色；
显示器：flex；
位置：相对位置；
}
李：姓名{
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}
李：姓名：后{
内容：''；
显示：内联块；
宽度：6px；
高度：6px；
背景：橙色；
位置：绝对位置；
z指数：3；
右：2px；
顶部：2个；
}



这是一个


这是一个


这是一个


这篇长文章在这里


这是因为当有长文本时，橙色点位于文本的末尾。您可以通过将
位置：绝对
指定给
：after
元素来验证这一点。

你可以这样做来避免这种情况


.root{
宽度：200px；
边框：1px纯黑；
}
保险商实验室{
保证金：0；
填充：0；
列表样式类型：无；
}
李{
边框底部：1px纯色灰色；
显示器：flex；
位置：相对位置；
}
李：姓名{
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}
李：姓名：后{
内容：''；
显示：内联块；
宽度：6px；
高度：6px；
背景：橙色；
位置：绝对位置；
z指数：3；
右：2px；
顶部：2个；
}



这是一个


这是一个


这是一个


这篇长文章在这里


为什么会发生这种情况
伪元素被视为
内联块
内容，这意味着它直接位于文本之后

你能做什么？
您可以使用
position:absolute将伪元素从文档流中取出，从而强制显示伪元素
并将其定位在
.name
容器的末尾

需要进行以下更改：


添加
位置：相对和
右侧填充：10px
到
li.name
，这将相对定位伪元素，并提供一些喘息空间

添加
位置：绝对位置，
右侧：2px，
顶部：0，
底部：0和
边距：自动
将伪元素定位在
.name



.root{
宽度：200px；
边框：1px纯黑；
}
保险商实验室{
保证金：0；
填充：0；
列表样式类型：无；
}
李{
边框底部：1px纯色灰色；
显示器：flex；
}
李：姓名{
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
位置：相对位置；
右边填充：10px；
}
李：姓名：后{
内容：''；
显示：内联块；
宽度：6px；
高度：6px；
背景：橙色；
位置：绝对位置；
右：2px；
排名：0；
底部：0；
保证金：自动；
}



这是一个


这是一个


这是一个


这篇长文章在这里


为什么会发生这种情况
伪元素被视为
内联块
内容，这意味着它直接位于文本之后

你能做什么？
您可以使用
position:absolute将伪元素从文档流中取出，从而强制显示伪元素
并将其定位在
.name
容器的末尾

需要进行以下更改：


添加
位置：相对和
右侧填充：10px
到
li.name
，这将相对定位伪元素，并提供一些喘息空间

添加
位置：绝对位置，
右侧：2px，
顶部：0，
底部：0和
边距：自动
将伪元素定位在
.name



.root{
宽度：200px；
边框：1px纯黑；
}
保险商实验室{
保证金：0；
填充：0；
列表样式类型：无；
}
李{
边框底部：1px纯色灰色；
显示器：flex；
}
李：姓名{
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
位置：相对位置；
右边填充：10px；
}
李：姓名：后{
内容：''；
显示：内联块；
宽度：6px；
高度：6px；
背景：橙色；
位置：绝对位置；
右：2px；
排名：0；
底部：0；
保证金：自动；
}



这是一个


这是一个