Bug 325258
| Summary: | Support CSS generated content in list ::marker pseudo-elements | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Richard Rutter <rich> |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED DUPLICATE | ||
| Severity: | Normal | CC: | koivisto, ntim, rich |
| Priority: | P2 | ||
| Version: | WebKit Nightly Build | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
Richard Rutter
According to CSS Lists and Counters Module Level 3 the ::marker pseudo element should support the `content` property (https://www.w3.org/TR/css-lists-3/#marker-properties)
This is supported in Chrome and Firefox but not WebKit.
The use case is to change the content of the markers to customise bullets or numbering without resorting to much more verbose @counter-style rules.
For example:
👉️ You could mark all list items with a pointing hand bullet.
1) You could number items with a parenthesis instead of a full stop.
To do so, use the content property and the counter() function like this:
``
ul li::marker {
content: "👉️ ";
}
ol li::marker {
content: counter(list-item) ") ";
}
``
Live example here: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::marker#try_it
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Tim Nguyen (:ntim)
*** This bug has been marked as a duplicate of bug 319211 ***