Html CSS-在：：after中定位内容时遇到问题

对不起，我的CSS技能不好

问题：我想使用CSS（无图像！）将正负符号添加到

的所有元素中

第一次尝试 我的解决方案是在所有

的开头放一个空的

，其中包含一个“正”或“负”类，该类具有相应的CSS以创建一个正符号或负符号。问题是

必须是

contenteditable=“true”

，这意味着当有人向

添加另一行（

）时，它将不会与创建带有类“正”和

内容“+”的符号的
一起出现positive:：after

中的code>规则。总而言之：当添加新行时，它不会带有积极的符号

这可以在以下代码中看到：

。阳性{
位置：相对位置；
顶部：2个；
边界半径：50%；
边框：1px纯绿色；
右边距：3倍；
宽度：15px；
高度：15px；
显示：内联flex；
字体大小：粗体；
背景色：白色；
颜色：绿色；
}
.肯定的：之后{
内容：“+”；
位置：相对位置；
左：2px；
底部：2px；
}
.否定{
位置：相对位置；
顶部：2个；
边界半径：50%；
边框：1px纯红；
右边距：3倍；
宽度：15px；
高度：15px；
显示：内联flex；
字体大小：粗体；
背景色：白色；
颜色：红色；
文本对齐：居中；
}
.否定：在{
内容：“−";
位置：相对位置；
左：2px；
底部：2px；
}
ol{
左侧填充：1.3em；
}

第一正
第二正
第三正
第四个为正，请在下面添加更多！contenteditable=“true”
第一个负片
第二负
第三负
第四个负数，请在下面添加更多！contenteditable=“true”

只需向伪元素添加

justify content:center

（正如您已经使它们显示为

display:inline flex

）

您还可以调整

线高度

，以固定垂直对齐

。肯定：在{
边界半径：50%；
边框：1px纯绿色；
右边距：3倍；
宽度：15px；
高度：15px；
显示：内联flex；
字体大小：粗体；
背景色：白色；
颜色：绿色；
内容：“+”；
位置：相对位置；
顶部：2个；
证明内容：中心；
线高：16px；
}
.否定：之前{
//边界半径：50%；
边框：1px纯红；
右边距：3倍；
宽度：15px；
高度：15px；
显示：内联flex；
字体大小：粗体；
背景色：白色；
文本对齐：居中；
内容：“−";
颜色：红色；
位置：相对位置；
顶部：2个；
证明内容：中心；
线高：16px；
}
ol{
左侧填充：1.3em；
}

第一阳性
第二阳性
第三个正极
第四个阳性，请在下面添加更多！contenteditable=“true”
第一次阴性
第二次负
第三次负
第四张底片，请在下面添加更多内容！contenteditable=“true”

3种使用字体图标创建有序列表的方法 使用如此多的对齐方式似乎很脆弱。作为替代，您可以使用字体图标

伪类字体

演示1

使用和尽管它们没有OP的抛光效果好，但它们是一体的

li{
线高：1；
垂直对齐：基线；
利润率：1.2ex 0；
}
.肯定的：之前{
内容：'\2295\a0'；
颜色：绿色；
字号：100；
线高：1；
垂直对齐：文本顶部；
显示：内联
}
.否定：之前{
内容：'\229f\a0'；
颜色：番茄；
线高：1；
垂直对齐：文本顶部；
显示：内联
}
ol{
左侧填充：1.3em；
}

第一阳性
第二阳性
第三个正极
第四个阳性，请在下面添加更多！contenteditable=“true”
第一次阴性
第二次负
第三次负
第四张底片，请在下面添加更多内容！contenteditable=“true”

太棒了！！！非常感谢！我花了几个小时搜索这个。不过，“+”和“-“看起来有点垂直错位，你知道可以把它们稍微向上放一点吗？@flen你可以用

行高来调整它。。尝试
行高：16px惊人的答案！我不知道amp-what.com，非常感谢您的分享☺ 这真的可以帮我省去时间和麻烦……不客气。如果你只想要象形文字，这就全有了。顺便说一句&#**
是HTML中使用的格式<代码>\***

用于CSS内容，

\u***

用于JS