1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>CSS: Marker Test</title>
6
7 <!--
8 File: CSSDweb.edu/Students/HGirmay67134/MarkerTest.html
9 Copyright (c) 2022 by Jesse Heines. All rights reserved. May be freely
10 copied or excerpted for educational purposes with credit to the author.
11 updated by JMH on September 20, 2022 at 12:51 PM
12 -->
13
14 <style>
15 /* the following works */
16 li::marker {
17 color: red ;
18 }
19
20 /* the following does NOT work as we would like */
21 #nmytop li {
22 list-style-image: url( Images/Check_BlueGrey.png ) ;
23 list-style-position: outside;
24 }
25 /* The following does NOT work because according to:
26 * https://developer.mozilla.org/en-US/docs/Web/CSS/::marker
27 * because only certain CSS properties can be used in a rule with ::marker
28 * as a selector:
29 * all font properties
30 * the white-space property
31 * the color property
32 * text-combine-upright, unicode-bidi and direction properties
33 * the content property
34 * all animation and transition properties
35 */
36 #nmytop li::marker {
37 margin-left: 5em ;
38 }
39 /* The following DOES work. This solution comes from:
40 * https://www.geeksforgeeks.org/how-to-resize-list-style-image-in-css/
41 * This is solution #2 on that page. It sets the list image as a background
42 * image and then adjusts various properties.
43 */
44 #nmytop li {
45 list-style: none ;
46 margin-left: -1em ;
47 padding: 3px 25px ;
48 background-image: url( "images/Check_BlueGrey.png" ) ;
49 background-repeat: no-repeat ;
50 background-position: left ;
51 background-size: 18px ;
52 }
53 </style>
54 </head>
55
56 <body>
57 <!-- Test #1 -->
58 <h2>Marker Test #1</h2>
59 <ul>
60 <li>one</li>
61 <li>two</li>
62 <li>three</li>
63 </ul>
64
65 <!-- Test #2 -->
66 <h2>Marker Test #2</h2>
67 <ul id="nmytop" >
68 <li>home</li>
69 <li>time</li>
70 <li>now</li>
71 </ul>
72 </body>
73 </html>