Skip to content

Commit 277f149

Browse files
tabatkinstabatkins
committed
Rewrite the ::marker section.
1 parent 931f680 commit 277f149

2 files changed

Lines changed: 270 additions & 180 deletions

File tree

‎css3-lists/Overview.html‎

Lines changed: 159 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -929,128 +929,192 @@ <h2 id=list-style-property><span class=secno>5. </span> The ‘<a
929929
<h2 id=marker-pseudo-element><span class=secno>6. </span> Markers: The
930930
<code class=css>::marker</code> pseudo-element</h2>
931931

932-
<p>Markers are created by setting an element's ‘<code
933-
class=property>display</code>’ property to ‘<code
934-
class=css>list-item</code>’ or ‘<a href="#inline-list-item"><code
935-
class=css>inline-list-item</code></a>’. The <code
936-
class=css>::marker</code> pseudo-element is only created if the computed
937-
value of the ‘<code class=property>content</code>’ property for the
938-
pseudo-element is not ‘<a href="#list-style-type-none"><code
939-
class=css>none</code></a>’.
940-
941-
<p>Just like other generated content, markers generate a box when they're
942-
created, which can be styled with the full range of properties and values.
943-
Markers are placed at the beginning of their superior parent's content,
944-
before the ::before pseudo-element (if it exists). <code
945-
class=css>::marker</code> pseudo-elements are inline by default, though
932+
<p> This specification defines a new type of pseudo-element, the ‘<code
933+
class=css>::marker</code>’ pseudo-element, which is generated by <a
934+
href="#list-item"><i>list items</i></a> to represent the item's marker
935+
(the bullet or number identifying each item).
936+
937+
<p> Like ‘<code class=css>::before</code>’ and ‘<code
938+
class=css>::after</code>’, the ‘<code class=css>::marker</code>’
939+
pseudo-element can be styled with the full range of CSS properties and
940+
values, exactly like a real element. Markers are placed at the beginning
941+
of their superior parent's content, before the ‘<code
942+
class=css>::before</code>’ pseudo-element (if it exists). ‘<code
943+
class=css>::marker</code>’ pseudo-elements are inline by default, though
946944
certain values for ‘<a href="#list-style-position"><code
947945
class=property>list-style-position</code></a>’ on the list item can make
948946
the marker box positioned, which can have an effect on the computed value
949947
of display.
950948

949+
<p> The ‘<code class=css>::marker</code>’ pseudo-element is only
950+
created on <a href="#list-item"><i>list items</i></a>. On any other
951+
element, the ‘<code class=css>::marker</code>’ pseudo-element's
952+
‘<code class=property>content</code>’ property must compute to ‘<a
953+
href="#list-style-type-none"><code class=css>none</code></a>’, which
954+
suppresses its creation.
955+
951956
<div class=example>
952-
<p>In the following example, the content is centered within a marker box
957+
<p> In the following example, the content is centered within a marker box
953958
of a fixed width. This document:
954959

955-
<pre>
956-
&lt;style>
957-
li::marker {
958-
content: "(" counter(counter) ")";
959-
width: 6em;
960-
text-align: center;
961-
}
962-
li {
963-
display: list-item;
964-
counter-increment: counter;
965-
}
966-
&lt;/style>
967-
&lt;ol>
968-
&lt;li>This is the first item.&lt;/li>
969-
&lt;li>This is the second item.&lt;/li>
970-
&lt;li>This is the third item.&lt;/li>
971-
&lt;/ol></pre>
960+
<pre><!--
961+
-->&lt;style>
962+
<!--
963+
-->li::marker {
964+
<!--
965+
--> content: "(" counter(counter) ")";
966+
<!--
967+
--> width: 6em;
968+
<!--
969+
--> text-align: center;
970+
<!--
971+
-->}
972+
<!--
973+
-->li {
974+
<!--
975+
--> display: list-item;
976+
<!--
977+
--> counter-increment: counter;
978+
<!--
979+
-->}
980+
<!--
981+
-->&lt;/style>
982+
<!--
983+
-->&lt;ol>
984+
<!--
985+
--> &lt;li>This is the first item.&lt;/li>
986+
<!--
987+
--> &lt;li>This is the second item.&lt;/li>
988+
<!--
989+
--> &lt;li>This is the third item.&lt;/li>
990+
<!--
991+
-->&lt;/ol></pre>
972992

973-
<p>should render something like this:
993+
<p> should render something like this:
974994

975-
<pre>
976-
(1) This is the
977-
first item.
978-
(2) This is the
979-
second item.
980-
(3) This is the
981-
third item.</pre>
995+
<pre><!--
996+
--> (1) This is the
997+
<!--
998+
--> first item.
999+
<!--
1000+
--> (2) This is the
1001+
<!--
1002+
--> second item.
1003+
<!--
1004+
--> (3) This is the
1005+
<!--
1006+
--> third item.</pre>
9821007
</div>
9831008

9841009
<div class=example>
9851010
<p>In this example, markers are used to number paragraphs that are
9861011
designated as "notes":
9871012

988-
<pre>
989-
&lt;style>
990-
p { margin-left: 12 em; }
991-
p.note::marker {
992-
content: "Note " counter(note-counter) ":";
993-
text-align: left;
994-
width: 10em;
995-
}
996-
p.note {
997-
display: list-item;
998-
counter-increment: note-counter;
999-
}
1000-
&lt;/style>
1001-
&lt;p>This is the first paragraph in this document.&lt;/p>
1002-
&lt;p class="note">This is a very short document.&lt;/p>
1003-
&lt;p>This is the end.&lt;/p>
1004-
</pre>
1005-
1006-
<p>It should render something like this:
1013+
<pre><!--
1014+
-->&lt;style>
1015+
<!--
1016+
-->p { margin-left: 12 em; }
1017+
<!--
1018+
-->p.note {
1019+
<!--
1020+
--> display: list-item;
1021+
<!--
1022+
--> counter-increment: note-counter;
1023+
<!--
1024+
-->}
1025+
<!--
1026+
-->p.note::marker {
1027+
<!--
1028+
--> content: "Note " counter(note-counter) ":";
1029+
<!--
1030+
--> text-align: left;
1031+
<!--
1032+
--> width: 10em;
1033+
<!--
1034+
-->}
1035+
<!--
1036+
-->&lt;/style>
1037+
<!--
1038+
-->&lt;p>This is the first paragraph in this document.&lt;/p>
1039+
<!--
1040+
-->&lt;p class="note">This is a very short document.&lt;/p>
1041+
<!--
1042+
-->&lt;p>This is the end.&lt;/p></pre>
10071043

1008-
<pre>
1009-
This is the first paragraph
1010-
in this document.
1044+
<p> It should render something like this:
10111045

1012-
Note 1: This is a very short
1013-
document.
1014-
1015-
This is the end.</pre>
1046+
<pre><!--
1047+
--> This is the first paragraph
1048+
<!--
1049+
--> in this document.
1050+
<!--
1051+
-->
1052+
<!--
1053+
--> Note 1: This is a very short
1054+
<!--
1055+
--> document.
1056+
<!--
1057+
-->
1058+
<!--
1059+
--> This is the end.</pre>
10161060
</div>
10171061

10181062
<div class=example>
1019-
<p>By using the <code class=css>::marker</code> pseudo-element, a list's
1020-
markers can be positioned much more flexibly, and even be styled
1063+
<p> By using the ‘<code class=css>::marker</code>’ pseudo-element, a
1064+
list's markers can be positioned much more flexibly, and even be styled
10211065
independently from the text of the list item itself:
10221066

10231067
<pre>
1024-
&lt;style>
1025-
p { margin-left: 8em } /* Make space for counters */
1026-
li { list-style-type: lower-roman; }
1027-
li::marker { margin: 0 3em 0 0; color: blue; }
1028-
&lt;/style>
1029-
&lt;p>This is a long preceding paragraph ...&lt;/p>
1030-
&lt;ol>
1031-
&lt;li>This is the first item.&lt;/li>
1032-
&lt;li>This is the second item.&lt;/li>
1033-
&lt;li>This is the third item.&lt;/li>
1034-
&lt;/ol>
1035-
&lt;p>This is a long following paragraph ...&lt;/p></pre>
1036-
1037-
<p>The preceding document should render something like this:
1068+
<!--
1069+
-->&lt;style>
1070+
<!--
1071+
-->p { margin-left: 8em } /* Make space for counters */
1072+
<!--
1073+
-->li { list-style-type: lower-roman; }
1074+
<!--
1075+
-->li::marker { margin: 0 3em 0 0; color: blue; font-weight:bold; }
1076+
<!--
1077+
-->&lt;/style>
1078+
<!--
1079+
-->&lt;p>This is a long preceding paragraph ...&lt;/p>
1080+
<!--
1081+
-->&lt;ol>
1082+
<!--
1083+
--> &lt;li>This is the first item.&lt;/li>
1084+
<!--
1085+
--> &lt;li>This is the second item.&lt;/li>
1086+
<!--
1087+
--> &lt;li>This is the third item.&lt;/li>
1088+
<!--
1089+
-->&lt;/ol>
1090+
<!--
1091+
-->&lt;p>This is a long following paragraph ...&lt;/p></pre>
10381092

1039-
<pre>
1040-
This is a long preceding
1041-
paragraph ...
1042-
1043-
<span
1044-
style="color:blue">i.</span> This is the first item.
1045-
<span
1046-
style="color:blue">ii.</span> This is the second item.
1047-
<span
1048-
style="color:blue">iii.</span> This is the third item.
1093+
<p> The preceding document should render something like this:
10491094

1050-
This is a long following
1051-
paragraph ...</pre>
1095+
<pre><!--
1096+
--> This is a long preceding
1097+
<!--
1098+
--> paragraph ...
1099+
<!--
1100+
-->
1101+
<!--
1102+
--> <span
1103+
style="color:blue;font-weight:bold;">i.</span> This is the first item.
1104+
<!--
1105+
--> <span
1106+
style="color:blue;font-weight:bold;">ii.</span> This is the second item.
1107+
<!--
1108+
--> <span
1109+
style="color:blue;font-weight:bold;">iii.</span> This is the third item.
1110+
<!--
1111+
-->
1112+
<!--
1113+
--> This is a long following
1114+
<!--
1115+
--> paragraph ...</pre>
10521116

1053-
<p>Previously the only way to style a marker was through inheritance; one
1117+
<p> Previously the only way to style a marker was through inheritance; one
10541118
had to put the desired marker styling on the list item, and then revert
10551119
that on a wrapper element around the list item's actual contents.
10561120
Non-inherited properties like ‘<code class=property>margin</code>’

0 commit comments

Comments
 (0)