当我点击"001"什么也没发生，它也不被认为是一个链接。
所以我想做的是:能够点击"001"并被重定向到相关列表元素的链接("Test") .
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>如果可能的话，我想保留定制清单。
您可以使用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>