How to Inspect and Style List Bullets with CSS ::marker in Safari Web Inspector

In modern web interface design, styling ordered and unordered lists (<ul>, <ol>, and <li>) or summary disclosures (<details> and <summary>) has historically required cumbersome workarounds. Developers frequently hid default list bullets using list-style: none and injected custom symbols or SVG icons via ::before pseudo-elements, adding markup complexity and disrupting accessibility tree semantics. Modern CSS Lists and Counters Level 3 specifications resolve this through the native ::marker pseudo-element. Supported across Apple’s WebKit rendering engine in Safari, ::marker provides direct styling access to the bullet, number, or disclosure triangle of a list item. Safari Web Inspector provides specialized tools to inspect marker inheritance, debug permitted CSS properties, and preview custom list styling.

Understanding the CSS ::marker Pseudo-Element and Permitted Properties

The ::marker pseudo-element represents the automatically generated marker box of any element whose display property evaluates to list-item (standard for <li> elements and customizable on arbitrary elements).

To preserve layout predictability and prevent marker dimensions from inducing circular layout recalculations, the CSS specification restricts ::marker to a strict subset of CSS properties:

• Typography Properties: color, font-family, font-size, font-weight, font-style, font-variant, and related font shorthand rules.
• Content and Strings: content (permitting custom text strings, emojis, quotes, or image URLs).
• Direction and Writing Modes: direction, unicode-bidi, and text-combine-upright.
• Animation and Transitions: animation and transition properties (allowing smooth color or font morphs).
• Prohibited Properties: Box-model properties—such as margin, padding, border, width, height, and position—are strictly prohibited on ::marker and are ignored by WebKit.

A typical CSS implementation styling custom checklist emojis and distinct bullet colors appears as follows:

/* Style bullet color independently from text color */
.custom-list li::marker {
  color: #3b82f6;
  font-size: 1.25em;
}

/* Custom string marker using emojis */
.checklist li::marker {
  content: "✓ ";
  color: #10b981;
  font-weight: bold;
}

/* Custom numbered badge suffix */
.numbered-steps li::marker {
  content: counter(list-item) " › ";
  color: #8b5cf6;
}

Enabling Developer Tools in Safari

To inspect list styling rules in Safari on macOS:

1. Launch Safari and navigate to Safari > Settings (or press Cmd + ,).
2. Select the Advanced tab and ensure Show features for web developers is enabled.
3. Open your target webpage in Safari.
4. Right-click on the list item whose bullet you wish to inspect and select Inspect Element, or press Option + Cmd + I.

Inspecting and Modifying ::marker in the Elements Panel

When Safari Web Inspector opens, navigate to the Elements tab. Locate your target <li> element in the DOM hierarchy.

Selecting the ::marker Node Directly

1. In the DOM tree, expand the <li> node.
2. Notice that Safari Web Inspector explicitly exposes the synthetic ::marker pseudo-element node in the tree hierarchy immediately before the element’s text content.
3. Click on the ::marker node in the DOM tree.
4. Inspect the Styles panel on the right sidebar. Safari displays the CSS rules specifically targeting the marker box, separating them from the parent list item’s rules.

Interactively Toggling Marker Styling in Real Time

To test different bullet designs and colors interactively:

• Click within the active style block in the Styles panel.
• Add a dynamic color property:

  color: #ef4444;

  Notice that only the bullet glyph turns red, while the adjacent paragraph copy retains its default font color.
• Inject custom string content:

  content: "★ ";

  Observe that WebKit immediately replaces the default disc with a star glyph, automatically aligning it with the list item baseline.
• Test font size scaling:

  font-size: 1.5em;

  Notice that the marker scales smoothly without altering the line-height or vertical spacing of the text item.

Inspecting Custom Disclosure Triangles on <details> Elements

In HTML5, the interactive disclosure widget (<details> and <summary>) formats its disclosure indicator using display: list-item:

1. In Safari Web Inspector, select a <summary> element in the DOM tree.
2. Expand the node and click on its ::marker child.
3. Notice that the default disclosure arrow is drawn by the marker box.
4. Customize the arrow or replace it with custom text dynamically in the Styles pane:

   summary::marker {
     content: "▶ ";
     color: #6366f1;
   }
   details[open] summary::marker {
     content: "▼ ";
     color: #4f46e5;
   }

5. Click the summary element in Safari’s viewport to watch the marker transition dynamically between closed and open states.

Debugging Common ::marker Traps in WebKit

When debugging list styling in Safari, keep the following considerations in mind:

• Prohibited Box-Model Properties: If you declare padding-right: 10px; on ::marker, Safari Web Inspector strikes through the property or ignores it silently. To create space between a marker and text, include trailing whitespace inside the content string (e.g., content: "• ";) or adjust list item padding.
• List-Style Reset: If list-style: none is applied to an <li>, the browser suppresses the marker box completely, causing ::marker declarations to have no effect. Verify in the Computed panel that list-style-type evaluates to something other than none.

By leveraging Safari Web Inspector to inspect synthetic ::marker nodes, test permitted typographical properties, and preview custom disclosure indicators, front-end developers can implement elegant, semantically accessible list designs across all Apple platforms.