html - CSS - 在::after 中定位内容时出现问题

Question

抱歉我的 CSS 技能不好。

问题:我想向 <ol> 的所有元素添加正负符号使用CSS(没有图像!)。

第一次尝试

我的解决方案是放置一个空的 <span>在一切的开始<li>具有“正”或“负”类，具有相应的 CSS 来创建正或负符号。问题是<ol>必须是contenteditable="true" ，这意味着当有人将另一行( <li> )添加到 <ol> 时，它不会附带 <span>创建具有“正”类和 content: "+"; 的符号伪元素 positive::after 中的规则。总之:添加新行时，不会带有正号。

这可以在下面的代码中看到:

.positive {
  position: relative;
  top: 2px;
  border-radius: 50%;
  border: 1px solid green;
  margin-right: 3px;
  width: 15px;
  height: 15px;
  display: inline-flex;
  font-weight: bold;
  background-color: white;
  color: green;
}

.positive:after {
  content: "+";
  position: relative;
  left: 2px;
  bottom: 2px;
}

.negative {
  position: relative;
  top: 2px;
  border-radius: 50%;
  border: 1px solid red;
  margin-right: 3px;
  width: 15px;
  height: 15px;
  display: inline-flex;
  font-weight: bold;
  background-color: white;
  color: red;
  text-align: center;
}

.negative:after {
  content: "−";
  position: relative;
  left: 2px;
  bottom: 2px;
}

ol {
  padding-left: 1.3em;
}

<ol contenteditable="true">
  <li><span class="positive"></span>1st positive</li>
  <li><span class="positive"></span>2nd positive</li>
  <li><span class="positive"></span>3rd positive</li>
  <li><span class="positive"></span>4th positive, please add more below! contenteditable="true"</li>
</ol>
<ol contenteditable="true">
  <li><span class="negative"></span>1st negative</li>
  <li><span class="negative"></span>2nd negative</li>
  <li><span class="negative"></span>3rd negative</li>
  <li><span class="negative"></span>4th negative, please add more below! contenteditable="true"</li>
</ol>

第二次尝试

所以我想我应该摆脱 <span>并直接将所有 CSS 插入 li.positive::before 中。这确实让一切焕然一新<li> s 前面有一个正数或负数符号，就像我想要的那样。但现在"+"和"-" content相对于正号或负号符号的圆圈未对齐。

这可以在下面的代码中看到:

.positive:before {
  border-radius: 50%;
  border: 1px solid green;
  margin-right: 3px;
  width: 15px;
  height: 15px;
  display: inline-flex;
  font-weight: bold;
  background-color: white;
  color: green;
  content: "+";
  position: relative;
  top: 2px;
}

.negative:before {
  //border-radius: 50%;	
  border: 1px solid red;
  margin-right: 3px;
  width: 15px;
  height: 15px;
  display: inline-flex;
  font-weight: bold;
  background-color: white;
  text-align: center;
  content: "−";
  color: red;
  position: relative;
  top: 2px;
}

ol {
  padding-left: 1.3em;
}

<ol contenteditable="true">
  <li class="positive">1st positive</li>
  <li class="positive">2nd positive</li>
  <li class="positive">3rd positive</li>
  <li class="positive">4th positive, please add more below! contenteditable="true"</li>
</ol>
<ol contenteditable="true">
  <li class="negative">1st negative</li>
  <li class="negative">2nd negative</li>
  <li class="negative">3rd negative</li>
  <li class="negative">4th negative, please add more below! contenteditable="true"</li>
</ol>

最后一个问题

如何将所有 CSS 放入 ::before 中伪元素(就像我上面的第二次尝试一样)，但对齐符号中的“+”和“-”，以便将它们放在围绕它们的白色圆圈的中间？

非常感谢!

Answer 1

只需将 justify-content: center 添加到伪元素(因为您已经将它们设置为 display: inline-flex)。

您还可以调整line-height来修复垂直对齐。

.positive:before {
  border-radius: 50%;
  border: 1px solid green;
  margin-right: 3px;
  width: 15px;
  height: 15px;
  display: inline-flex;
  font-weight: bold;
  background-color: white;
  color: green;
  content: "+";
  position: relative;
  top: 2px;
  justify-content: center;
  line-height:16px;
}

.negative:before {
  //border-radius: 50%;	
  border: 1px solid red;
  margin-right: 3px;
  width: 15px;
  height: 15px;
  display: inline-flex;
  font-weight: bold;
  background-color: white;
  text-align: center;
  content: "−";
  color: red;
  position: relative;
  top: 2px;
  justify-content: center;
  line-height:16px;
}

ol {
  padding-left: 1.3em;
}

<ol contenteditable="true">
  <li class="positive">1st positive</li>
  <li class="positive">2nd positive</li>
  <li class="positive">3rd positive</li>
  <li class="positive">4th positive, please add more below! contenteditable="true"</li>
</ol>
<ol contenteditable="true">
  <li class="negative">1st negative</li>
  <li class="negative">2nd negative</li>
  <li class="negative">3rd negative</li>
  <li class="negative">4th negative, please add more below! contenteditable="true"</li>
</ol>