CSS-在:: after中定位内容时遇到麻烦

Question

Sorry for my bad CSS skills.

Problem: I want to add a positive and negative symbol to all elements of a <ol> using CSS (no images!).

First Attempt

My solution was to put an empty <span> in the beginning of all <li> with a "positive" or "negative" class that has the corresponding CSS to create a positive or negative symbol. The problem is that the <ol> must be contenteditable="true" , that means that when someone adds another line ( <li> ) to the <ol> , it will not come with the <span> that creates the symbol with the class "positive" and with the content: "+"; rule in the pseudo-element positive::after . In sum: when adding a new line, it won't come with a positive symbol.

This can be seen in the following code:

 .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> 

Second Attempt

So I thought I'd get rid of the <span> and directly insert all CSS in a li.positive::before . This, indeed, makes all new <li> s have prefixed a positive or negative symbol, just like I wanted. But now the "+" and "-" content is misaligned in relation to the circle of the positive or negative symbol.

This can be seen in the following code:

 .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> 

Final Question

How can I put all CSS in the ::before pseudo-element (just like in my Second Attempt, above) but align the "+" and "-" in the symbols so to put them in the middle of the white circle that surrounds them?

Thank you very much!

Answer 1

Simply add justify-content: center to pseudo element (as you already made them display: inline-flex ).

You may also adjust the line-height to fix vertical alignment.

 .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 Ways to Create an Ordered List with Font Icons

Using so many alignments seems fragile. As an alternative, you could use font icons instead.

Pseudo-class Font

Demo 1

Use \\2295 and \\229f albeit they are not as well polished as OP's but they are one piece.

 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

Demo 2

If appearance is the main concern, take it to the next level with Font Awesome (see Demo 2) and use their icons by pseudo-class. Use this site for reference . One problem is that they do not have a line circle with plus icon, but strangely enough they do have a line square with plus, a filled square with plus, and a filled circle with plus.

 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> 

---

Font Awesome Standard with CSS Counters

Demo 3

There's also the standard method using .fa-* classes. with the use of CSS counters to compensate for the lack of an <ol> alternative (see Demo3).

 .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>