How to add content before ::marker in CSS? - css

ol::before:marker {
font-size: 120%;
color: #00b7a8;
font-family: "Comic Sans MS", cursive, sans-serif;
content: '√';
}
I want to add "√" before ::marker element and this is my CSS code, but it's no use，could you help me?


Add symbol with class
ol>li.checked::marker {
content: "√ " counter(list-item) ". ";
}
ul>li.checked::before {
content: "√";
margin-left: -30px;
margin-right: 21px;
}
<h3>Ordered</h3>
<ol>
<li class='checked'>item 1</li>
<li>item 2</li>
<li class='checked'>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
</ol>
<h3>Unordered</h3>
<ul>
<li class='checked'>item 1</li>
<li>item 2</li>
<li class='checked'>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
</ul>
<h3>Nested list</h3>
<ul>
<li class='checked'>
<ol>
<li class='checked'>item 1</li>
<li>item 2</li>
<li class='checked'>item 3</li>
<li>
<ul>
<li class='checked'>item 1</li>
<li>item 2</li>
<li class='checked'>item 3</li>
<li>item 4</li>
</ul>
</li>
<li>item 5</li>
</ol>
</li>
<li>item 2</li>
<li class='checked'>item 3</li>
<li>item 4</li>
</ul>
Add symbol without class
ol>li::marker {
content: "√ " counter(list-item) ". ";
}
ul>li::before {
content: "√";
margin-left: -30px;
margin-right: 21px;
}
<h3>Ordered</h3>
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
</ol>
<h3>Unordered</h3>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
</ul>
<h3>Nested list</h3>
<ul>
<li>
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</li>
<li>item 5</li>
</ol>
</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>


If you don't want to use a class then use :nth-* to specify which <li> to style. Just style the ::marker pseudo-element, it gets too crowded with ::before added in. The content: can be manually filled. The normal ::marker for a <li> inside an <ol> is a number and a dot (ex: 1.) so include that and add anything behind it, in front of it, etc..
li:first-of-type::marker {
content: '✔️/*space*/1./*space*/'
}
li:first-of-type::marker {
content: '✔️ 1. ';
}
<ol>
<li>...I</li>
<li>...II</li>
<li>...III</li>
<li>...IV</li>
<li>...V</li>
</ol>

Related

What is the difference between alphabetic and numeric types in the CSS symbols() function?

Can you explain me please, What is the difference between of that two types in css symbols() function? When I try separately each of them, I has'nt seen any difference, only one - numbering start from 0 and first symbol doesn't show first in the list.
div {
margin: 70px 70px;
}
ol {
list-style: symbols(numeric "○" "●" "□")
}
<div>
<ol>
<li>item</li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
</ol>
</div>

For numeric, the symbols represent the digits of a number system, where the number of symbols represents the base. The list starts at 1, and when it runs out of symbols, it continues to 10.
ol {
list-style: symbols(numeric "0" "1" "2" "3" "4" "5" "6" "7" "8" "9");
}
<div>
<ol>
<li>item</li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
</ol>
</div>
For alphabetic, the list is constructed in the same way, but without the assumption that the first symbol represents 0. When the list runs out of symbols, it continues with 00 instead of 10.
ol {
list-style: symbols(alphabetic "0" "1" "2" "3" "4" "5" "6" "7" "8" "9");
}
<div>
<ol>
<li>item</li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
<li>item </li>
</ol>
</div>
symbols() - CSS: Cascading Style Sheets | MDN

How can I arrange a series of lists so they stack on top of each other?

This is what I have:
And this is what I want:
I cannot easily change the DOM structure as I am working with a WordPress list generated via creating a new menu. I have tried different techniques such as Flexbox and grid but I just cannot seem to get the results I am after. I'd love it if someone could help here. Thank you.
https://codepen.io/WayneHaworth/pen/BGzzpr
<div class="container">
<ul id="main-menu">
<li>
<span>List 1</span>
<ul class="inner-list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
</ul>
</li>
<li>
<span>List 2</span>
<ul class="inner-list">
<li>item 1</li>
<li>item 2</li>
</ul>
</li>
...etc
</ul>
</div>

As per #Doug's comment, adding a CSS column to the outside UL fixed this.
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 5;

Nested ordered list in ascendent order

I try to show an ordered list from 1 to 7.
<ol>
<li>item 1</li>
<li>item 2
<ol>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ol>
</li>
<li>item 6</li>
<li>item 7</li>
</ol>
Expected:

Yes #Rajibkarmaker, was about counter-reset the first ol and then counter-increment to every li!
ol.example{counter-reset: section;}
ol.example,ol.example ol {list-style:none}
ol.example li::before {counter-increment: section; content: counter(section);}

How can I create multi columns from a single unordered list?

I'd like to create a multi column list like this:
https://jsfiddle.net/37dfwf4u/
No problem when using a different list for each column:
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
<ul>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
</ul>
ul {
display:inline-block;
}
However, can this be done by a continuous list and pure CSS so that the CSS arranges the columns automatically?
E.g. by use of flex layout which I'm not yet familiar with?

Yes, you can create a multi column list as described if you make the ul a flex container, change the flex-direction to column, allow it to wrap by applying flex-wrap: wrap and additionally force it to wrap by limiting its height:
ul {
height: 100px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
<li>item 11</li>
<li>item 12</li>
<li>item 13</li>
<li>item 14</li>
<li>item 15</li>
<li>item 16</li>
<li>item 17</li>
<li>item 18 </li>
<li>item 19</li>
<li>item 20</li>
<li>item 21</li>
</ul>
Here's another possibility, added half a year later after the comment by #Andrew Koper:
You can also use the colummn-count parameter, which doesn't require a fixed height (and also not flex), but defines a fixed number of columns. So in the example below, even just two list items would be broken into two columns of one list item each:
ul {
column-count: 2;
}
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
<li>item 11</li>
<li>item 12</li>
<li>item 13</li>
<li>item 14</li>
<li>item 15</li>
<li>item 16</li>
<li>item 17</li>
<li>item 18 </li>
<li>item 19</li>
<li>item 20</li>
<li>item 21</li>
</ul>

Consider using CSS3 Multi-column Layout for that:
CSS3 Multiple Columns
You can do that using just one list and define the number of columns with CSS. If you check CSS3 Multi-column layout browser support here you can see partial support by most of the browsers, because they do not support break-before, break-after and break-inside properties. But they do support the properties you will need to create a multi column list with a prefix.
.container {
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
}
ul {
margin: 0;
}
<div class="container">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
</ul>
</div>

Not Able to Skip Adding CSS Rule to First li Element Using not(first)

Can you please take a look at this demo and let me know why I am not able to not add the css rule to the first item using the not option?
li:not(first) {
color: red;
}
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Item 2-1</li>
<li>Item 2-2</li>
<li>Item 2-3</li>
<li>Item 2-4</li>
</ul>
</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>

You probably meant :not(:first-child) (there is no CSS first). There is :first but that's for printing:
The :first #page CSS pseudo-class describes the styling of the first
page when printing a document.
li:not(:first-child){ color:red; }
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Item 2-1</li>
<li>Item 2-2</li>
<li>Item 2-3</li>
<li>Item 2-4</li>
</ul>
</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
You could also do li:not(:first-of-type):
li:not(:first-of-type){ color:red; }
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Item 2-1</li>
<li>Item 2-2</li>
<li>Item 2-3</li>
<li>Item 2-4</li>
</ul>
</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Or li:not(:nth-child(1)):
li:not(:nth-child(1)){ color:red; }
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Item 2-1</li>
<li>Item 2-2</li>
<li>Item 2-3</li>
<li>Item 2-4</li>
</ul>
</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Or li:not(:nth-of-type(1)):
li:not(:nth-of-type(1)){ color:red; }
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Item 2-1</li>
<li>Item 2-2</li>
<li>Item 2-3</li>
<li>Item 2-4</li>
</ul>
</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
By the way, if you're wondering why the inner list doesnt have its first element's color changed it because color is an inherited property.

You got the syntax wrong
li:not(:first-child)

Resources