doc_pseudoelement.html (5209B)
1 <!-- Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ --> 3 <html> 4 <head> 5 <style> 6 7 body { 8 color: #333; 9 } 10 11 .box { 12 float:left; 13 width: 128px; 14 height: 128px; 15 background: #ddd; 16 padding: 32px; 17 margin: 32px; 18 position:relative; 19 } 20 21 .box:first-line { 22 color: orange; 23 background: red; 24 } 25 26 .box:first-letter { 27 color: green; 28 } 29 30 * { 31 cursor: default; 32 } 33 34 nothing { 35 cursor: pointer; 36 } 37 38 p::-moz-selection { 39 color: white; 40 background: black; 41 } 42 p::selection { 43 color: white; 44 background: black; 45 } 46 47 p:first-line { 48 background: blue; 49 } 50 p:first-letter { 51 color: red; 52 font-size: 130%; 53 } 54 55 .box:before { 56 background: green; 57 content: " "; 58 position: absolute; 59 height:32px; 60 width:32px; 61 } 62 63 .box:after { 64 background: red; 65 content: " "; 66 position: absolute; 67 border-radius: 50%; 68 height:32px; 69 width:32px; 70 top: 50%; 71 left: 50%; 72 margin-top: -16px; 73 margin-left: -16px; 74 } 75 76 .topleft:before { 77 top:0; 78 left:0; 79 } 80 81 .topleft:first-line { 82 color: orange; 83 } 84 .topleft::selection { 85 color: orange; 86 } 87 88 .topright:before { 89 top:0; 90 right:0; 91 } 92 93 .bottomright:before { 94 bottom:10px; 95 right:10px; 96 color: red; 97 } 98 99 .bottomright:before { 100 bottom:0; 101 right:0; 102 } 103 104 .bottomleft:before { 105 bottom:0; 106 left:0; 107 } 108 109 #list::after { 110 content: "suffix"; 111 display: list-item; 112 } 113 114 #list::after::marker { 115 content: "+"; 116 color: tomato; 117 } 118 119 #list-item::marker { 120 color: purple; 121 } 122 123 :is( 124 dialog, 125 [popover], 126 :fullscreen 127 )::backdrop { 128 background-color: transparent; 129 } 130 131 .highlights-container { 132 &::highlight(search) { 133 background-color: tomato; 134 color: gold; 135 } 136 137 &::highlight(search) { 138 color: white; 139 } 140 141 &::highlight(filter) { 142 background-color: purple; 143 } 144 145 &::highlight(unused) { 146 background-color: cyan; 147 } 148 } 149 150 input::slider-fill { 151 background: tomato; 152 } 153 input::slider-thumb { 154 background: gold; 155 } 156 input::slider-track { 157 background: seagreen; 158 } 159 160 .url-fragment-text-directives::target-text { 161 background-color: salmon; 162 } 163 164 details[open]::details-content { 165 color: hotpink; 166 border: 4px solid darkmagenta; 167 } 168 169 html:active-view-transition { 170 color: peachpuff; 171 } 172 173 ::view-transition { 174 color: lime; 175 } 176 177 /* Use very long animation-duration so the view-transition pseudo elements are available 178 during the whole test */ 179 ::view-transition-old(root), 180 ::view-transition-new(root) { 181 animation-duration: 1000s; 182 top: 1em; 183 gap: 10px; 184 } 185 186 ::view-transition-new(root) { 187 /* This should override the previous rule declaration when ::view-transition-new(root) is selected */ 188 animation-duration: 3600s; 189 color: thistle; 190 } 191 192 #with-unmatched-selector::before, 193 unknown::before, 194 #with-unmatched-selector::after, 195 anotherunknown { 196 content: "unmatched pseudo"; 197 } 198 199 </style> 200 </head> 201 <body> 202 <h1>ruleview pseudoelement($("test"));</h1> 203 204 <div id="topleft" class="box topleft"> 205 <p>Top Left<br />Position</p> 206 </div> 207 208 <div id="topright" class="box topright"> 209 <p>Top Right<br />Position</p> 210 </div> 211 212 <div id="bottomright" class="box bottomright"> 213 <p>Bottom Right<br />Position</p> 214 </div> 215 216 <div id="bottomleft" class="box bottomleft"> 217 <p>Bottom Left<br />Position</p> 218 </div> 219 220 <div id="with-unmatched-selector">Some unmatched pseudo-element selector part</div> 221 222 <ol id="list"> 223 <li id="list-item" class="box">List element</li> 224 </ol> 225 226 <dialog> 227 In dialog 228 <div id="in-dialog" popover>hello</div> 229 </dialog> 230 231 <label>Range <input type="range" class="slider"></label> 232 <label>Not range <input type="text" class="slider"></label> 233 234 <section class="highlights-container"> 235 Firefox Developer Tools is a set of web developer tools built into Firefox. 236 You can use them to examine, edit, and debug HTML, CSS, and JavaScript. 237 </section> 238 239 <section class="url-fragment-text-directives">May the fox be with you</section> 240 241 <canvas></canvas> 242 243 <details open> 244 <summary>Summary</summary> 245 <h2>::details-content</h2> 246 <p>In details</p> 247 </details> 248 249 <aside class="transition">Transition</section> 250 251 <script> 252 "use strict"; 253 // This is the only way to have the ::backdrop style to be applied 254 document.querySelector("dialog").showModal() 255 document.querySelector("#in-dialog").showPopover() 256 257 // Register highlights for ::highlight pseudo elements 258 const highlightsContainer = document.querySelector(".highlights-container"); 259 260 const searchRange = new Range(); 261 searchRange.setStart(highlightsContainer.firstChild, 0); 262 searchRange.setEnd(highlightsContainer.firstChild, 10); 263 CSS.highlights.set("search", new globalThis.Highlight(searchRange)); 264 265 const filterRange = new Range(); 266 filterRange.setStart(highlightsContainer.firstChild, 20); 267 filterRange.setEnd(highlightsContainer.firstChild, 100); 268 CSS.highlights.set("filter", new globalThis.Highlight(filterRange)); 269 </script> 270 </body> 271 </html>