Closed
Description
The at-rule counter-style allows you to create your own list styles.
But the validator does not support it.
Error message :
Sorry! We found the following errors (1)
URI : TextArea
38 Value Error : content icone is not a content value : counter(step,icone)
// CSS
.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;
}// HTML
<!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
Metadata
Metadata
Assignees
Labels
No labels