html列表中的浮动标志

我试图在html列表中的某些项目上显示一个标志。在下面的屏幕截图中，您可以看到列表底部的小“AF”。我想将该标志放在列表的选定项目中。尽管在列表项中引用了类，但它只会出现在整个列表的底部

div{
宽度：500px；
利润率：10px
}
保险商实验室{
颜色：白色；
列表样式类型：无；
}
ulli{
位置：相对位置；
字体：粗体斜体22px/1.7 Helvetica，Verdana，无衬线；
保证金：0；
填充：0；
背景#34495E；
}
ul li：第n种类型（奇数）{
保证金：0；
填充：0；
背景：#283747；
}
h3{
左侧填充：100px；
字体：16px/1.2 Helvetica，Verdana，无衬线；
边际：0px；
}
李平{
字体：12px/1.5 Helvetica，无衬线；
左侧填充：100px；
颜色：#D0D3D4；
保证金：0；
}
李：悬停{
背景：#7D6608；
光标：指针；
}
li:悬停：第n个类型（奇数）{
背景：#7D6608；
光标：指针；
}
跨度{
位置：绝对位置；
}
1.休息{
背景：黄色；
字体：18px/1.7 Helvetica，Verdana，无衬线；
颜色：黑色；
}
.scene_break：第n个类型（奇数）{
背景：黄色；
字体：18px/1.7 Helvetica，Verdana，无衬线；
颜色：黑色；
}
li.live_cue{
边框：4px纯黄色；
}
.cue_af{
显示：内联块；
背景色：#7E009A；/*更改背景色*/
字体大小：粗体；/*使字体粗体*/
边框半径：5px；/*制作边框半径*/
宽度：自动；/*使宽度自动调整*/
高度：自动；/*使自动调整大小高度*/
填充：0px 3px 0px 3px；/*在字母周围留出空格*/
字体大小：12px；/*更改字体大小*/
}

71'+
测试描述
时间：0

af

以下是两种您可以使用的解决方案

解决方案：1

您可以对

使用
position:absolute
。cue_af

然后根据

li

对其进行定位，只需将类

添加到任何
li
上，它将自动定位，检查如下：


.flag{
位置：相对位置；
}
.flag：：之后{
内容：“AF”；
位置：绝对位置；
字体大小：12px；
背景：紫罗兰色；
填充：3px6px；
边界半径：4px；
顶部：7px；
右：7px；
z指数：99；
}
div{
宽度：500px；
利润率：10px
}
保险商实验室{
颜色：白色；
列表样式类型：无；
}
ulli{
位置：相对位置；
字体：粗体斜体22px/1.7 Helvetica，Verdana，无衬线；
保证金：0；
填充：0；
背景#34495E；
}
ul li：第n种类型（奇数）{
保证金：0；
填充：0；
背景：#283747；
}
h3{
左侧填充：100px；
字体：16px/1.2 Helvetica，Verdana，无衬线；
边际：0px；
}
李平{
字体：12px/1.5 Helvetica，无衬线；
左侧填充：100px；
颜色：#D0D3D4；
保证金：0；
}
李：悬停{
背景：#7D6608；
光标：指针；
}
li:悬停：第n个类型（奇数）{
背景：#7D6608；
光标：指针；
}
跨度{
位置：绝对位置；
}
1.休息{
背景：黄色；
字体：18px/1.7 Helvetica，Verdana，无衬线；
颜色：黑色；
}
.scene_break：第n个类型（奇数）{
背景：黄色；
字体：18px/1.7 Helvetica，Verdana，无衬线；
颜色：黑色；
}
li.live_cue{
边框：4px纯黄色；
}
.cue_af{
显示：内联块；
背景色：#7E009A；/*更改背景色*/
字体大小：粗体；/*使字体粗体*/
边框半径：5px；/*制作边框半径*/
宽度：自动；/*使宽度自动调整*/
高度：自动；/*使自动调整大小高度*/
填充：0px 3px 0px 3px；/*在字母周围留出空格*/
字体大小：12px；/*更改字体大小*/
}

71'+
测试描述
时间：0

af

71'+
测试描述
时间：0

af

71'+
测试描述
时间：0

af

71'+
测试描述
时间：0

af

检查此代码片段，我认为这是您想要的，当您单击某个项目时，该项目将被选中并显示“AF”，如果您单击具有“AF”的项目，则“AF”一词将被删除


const onSelectedItem=（元素）=>{
if（element.classList.contains（'selected'））
element.classList.remove（'selected'）；else element.classList.add（'selected'））
}
div{
宽度：500px；
利润率：10px
}
保险商实验室{
颜色：白色；
列表样式类型：无；
}
ulli{
位置：相对位置；
字体：粗体斜体22px/1.7 Helvetica，Verdana，无衬线；
保证金：0；
填充：0；
背景#34495E；
}
ul li：第n种类型（奇数）{
保证金：0；
填充：0；
背景：#283747；
}
h3{
左侧填充：100px；
字体：16px/1.2 Helvetica，Verdana，无衬线；
边际：0px；
}
李平{
字体：12px/1.5 Helvetica，无衬线；
左侧填充：100px；
颜色：#D0D3D4；
保证金：0；
}
李：悬停{
背景：#7D6608；
光标：指针；
}
li:悬停：第n个类型（奇数）{
背景：#7D6608；
光标：指针；
}
跨度{
位置：绝对位置；
}
1.休息{
背景：黄色；
字体：18px/1.7 Helvetica，Verdana，无衬线；
颜色：黑色；
}
.scene_break：第n个类型（奇数）{
背景：黄色；
字体：18px/1.7 Helvetica，Verdana，无衬线；
颜色：黑色；
}
li.live_cue{
边框：4px纯黄色；
}
.cue_af{
显示：无；
背景色：#7E009A；/*更改背景色*/
字体大小：粗体；/*使字体粗体*/
边框半径：5px；/*制作边框半径*/
宽度：自动/