Edit : Following this publication https://github.com/w3c/css-validator/issues/380 the bug is fixed https://github.com/w3c/css-validator/commit/eca30bb7e985a9027e01d310b1b9e5588ae4b2b9
the at counter-style rule allows you to create your own list styles. Only, this seems to cause a problem with the w3c css validator. Is this legitimate? This is well supported by browsers, and it makes counter-style property useless, if it is legitimate.
Error message :
Sorry! We found the following errors (1)
URI : TextArea
38 Value Error : content icone is not a content value : counter(step,icone)
Thanks in advance for your answers.
You can try on https://jigsaw.w3.org/css-validator/#validate_by_input
.works {
font-size: 2.5rem;
font-weight: bolder;
padding: 4rem 2rem;
}
.works ol {
counter-reset: step;
}
.works ol li {
padding: 2.5rem 6.5rem 2.5rem 7.5rem;
border-radius: 15px;
font-weight: 500;
font-size: medium;
background-color: #F6F6F6;
margin-top: 2rem;
margin-left: 1rem;
box-shadow: 2px 4px 14px -5px #888;
position: relative;
}
.works ol li::before {
content: counter(step);
counter-increment: step;
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
left: -1rem;
border-radius: 50%;
background-color: #9356DC;
padding: 5px 8px;
color: white;
font-size: 1.1rem;
}
.works ol li::after {
content: counter(step, icone);
counter-increment: icone;
list-style: icone;
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
left: 3.5rem;
color: #808080;
font-size: 2rem;
}
.works ol li:hover {
background-color: #f5edff;
}
@counter-style icone {
system: additive;
additive-symbols: "\f54e" 3, "\f0ca" 2, "\f3cd" 1;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Works</title>
<style>
ol,
ul,
menu,
li {
list-style: none;
}
</style>
</head>
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<div class="works">
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</body>
</html>For information : the MDN page of Content property :
Values counter()
The value of a CSS counter, generally a number produced by computations defined by and properties. It can be displayed using either the counter() or counters() function.
The counter() function has two forms: 'counter(name)' or 'counter(name, style)'. The generated text is the value of the innermost counter of the given name in scope at the given pseudo-element. It is formatted in the specified (decimal by default).
And in w3c page of content property :
Counters may be specified with two different functions: 'counter()' or 'counters()'. The former has two forms: 'counter(name)' or 'counter(name, style)'. The generated text is the value of the innermost counter of the given name in scope at this pseudo-element; it is formatted in the indicated style ('decimal' by default). The latter function also has two forms: 'counters(name, string)' or 'counters(name, string, style)'. The generated text is the value of all counters with the given name in scope at this pseudo-element, from outermost to innermost separated by the specified string. The counters are rendered in the indicated style ('decimal' by default). See the section on automatic counters and numbering