使用字体图标创建有序列表的3种方法

Question

抱歉我的CSS技能不好。

问题：我想使用CSS（无图像！）为<ol>的所有元素添加正负符号。

第一次尝试

我的解决方案是在所有<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>并直接在li.positive::before中插入所有CSS。事实上，这使得所有新的<li>都有一个正面或负面的符号前缀，就像我想要的那样。但现在"+"和"-" 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>

Answer 2

使用字体图标创建有序列表的3种方法

使用如此多的路线似乎很脆弱。作为替代方案，您可以使用字体图标。

伪类字体

演示1

使用 \2295 和 \229f 虽然它们不像OP那么精致，但它们是一体的。

li {
  line-height: 1;
  vertical-align: baseline;
  margin: 1.2ex 0;
}

.positive:before {
  content: '\2295\a0';
  color: green;
  font-weight: 100;
  line-height: 1;
  vertical-align: text-top;
  display: inline
}

.negative:before {
  content: '\229f\a0';
  color: tomato;
  line-height: 1;
  vertical-align: text-top;
  display: inline
}

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>

Pseudo-class Font Awesome

演示2

如果外观是主要问题，请使用Font Awesome将其提升到下一级别（请参阅演示2）并使用伪类的图标。使用此site for reference。一个问题是他们没有带有加号图标的直线圆，但奇怪的是他们确实有一个加号的正方形，一个带加号的实心正方形和一个带加号的实心圆。

li {
  line-height: 1;
  vertical-align: baseline;
  margin: 1.2ex 0;
}

.positive:before {
  font-family: FontAwesome;
  content: '\f196\a0';
  color: green;
  font-weight: 100;
  line-height: 1;
  vertical-align: text-top;
  display: inline
}

.negative:before {
  font-family: FontAwesome;
  content: '\f147\a0';
  color: tomato;
  line-height: 1;
  vertical-align: text-top;
  display: inline
}

.positive.inv::before {
  content: '\f0fe\a0';
}

.negative.inv::before {
  content: '\f146\a0';
}

.positive.orb::before {
  content: '\f055\a0';
}

.negative.orb::before {
  content: '\f056\a0';
}

ol 
  padding-left: 1.3em;
}

<link href="https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<ul class="fa-ul">
  <li><i class="fa-li fa fa-plus-circle"></i>can be used</li>
  <li><i class="fa-li fa fa-minus-circle"></i>can be used</li>
  <li><i class="fa-li fa fa-plus-square"></i>as bullets</li>
  <li><i class="fa-li fa fa-minus-square"></i>in lists</li>
  <li><i class="fa-li fa fa-plus-circle-o"></i>can be used</li>
  <li><i class="fa-li fa fa-minus-circle-o"></i>can be used</li>
  <li><i class="fa-li fa fa-plus-square-o"></i>as bullets</li>
  <li><i class="fa-li fa fa-minus-square-o"></i>in lists</li>
</ul>

<ol contenteditable="true">
  <li class="positive orb">1st positive</li>
  <li class="positive inv">2nd positive</li>
  <li class="positive">3rd positive</li>
</ol>
<ol contenteditable="true">
  <li class="negative orb">1st negative</li>
  <li class="negative inv">2nd negative</li>
  <li class="negative">3rd negative</li>
</ol>

<小时/> 使用CSS计数器的字体真棒标准

演示3

还有使用.fa-*类的标准方法。使用CSS counters来补偿lack of an <ol> alternative（参见演示3）。

.fa-ul {
  counter-reset: fa;
  line-height: 1.3
}

.fa-ul li {
  counter-increment: fa;
  position: relative
}

.fa-ul li::before {
  content: counter(fa)'.\a0';
  position: absolute;
  left: -4.5ch
}

<link href="https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<ul class="fa-ul">
  <li><i class="fa-li fa fa-plus-circle"></i>fa-plus-circle</li>
  <li><i class="fa-li fa fa-minus-circle"></i>fa-minus-circle</li>
  <li><i class="fa-li fa fa-plus-square"></i>fa-plus-square</li>
  <li><i class="fa-li fa fa-minus-square"></i>fa-minus-square</li>
  <li><i class="fa-li fa fa-plus-circle-o">?</i>fa-plus-circle-o</li>
  <li><i class="fa-li fa fa-minus-circle-o">?</i>fa-minus-circle-o</li>
  <li><i class="fa-li fa fa-plus-square-o"></i>fa-plus-square-o</li>
  <li><i class="fa-li fa fa-minus-square-o"></i>fa-minus-square-o</li>
</ul>

CSS - 在

第一次尝试

第二次尝试

最终问题

2 个答案:

使用字体图标创建有序列表的3种方法