At the moment when I click on "001" nothing happens and it’s not considered as a link.
So what I would like to do is : being able to click on the "001" and being redirected to the link of the concerned list element ("Test" here).
body {
font-family: "Space Mono", monospace;
background-color: #e5e5e5;
margin: 0;
}
h1 {
text-align: center;
}
.custom-list {
counter-reset: custom-counter;
list-style-type: none;
display: flex;
flex-direction: column;
gap: 1rem;
padding: 0;
max-width: 50%;
margin: 0 auto;
}
.custom-list li:before {
content: counter(custom-counter);
counter-increment: custom-counter;
content: "00" counter(custom-counter);
}
li {
display: flex;
justify-content: space-between;
border-bottom: 3px solid;
padding-bottom: 1rem;
}<head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap" rel="stylesheet" />
</head>
<main>
<h1>Test</h1>
<hr />
<ol class="custom-list">
<li><a href="#">Test</a></li>
</ol>
</main>I would like to keep the custom list (00X) if possible.
>Solution :
You can use position: relative
body {
font-family: "Space Mono", monospace;
background-color: #e5e5e5;
margin: 0;
}
.custom-list {
counter-reset: custom-counter;
list-style-type: none;
display: flex;
flex-direction: column;
gap: 1rem;
padding: 0;
max-width: 50%;
margin: 0 auto;
}
.custom-list li {
position: relative;
}
.custom-list li:before {
content: counter(custom-counter);
counter-increment: custom-counter;
content: "00" counter(custom-counter);
position: absolute;
}
.custom-list li:hover:before, .custom-list li a:hover {
color: red;
}
.custom-list li a {
display: block;
position: relative;
text-align: end;
width: 100%;
height: 100%;
z-index: 1;
}
li {
display: flex;
justify-content: space-between;
border-bottom: 3px solid;
padding-bottom: 1rem;
}<main>
<h1>Test</h1>
<hr />
<ol class="custom-list">
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ol>
</main>