如何让HTML5列表中的项目符号单独作为超链接？

修改后的HTML结构 #

在每个列表项开头添加空的<a>标签并指定对应链接地址：

<h3> Los primeros tres</h3>
<ul>
    <li><a href="el-duelo.html"></a>El Duelo</li>
    <li><a href="fundacion.html"></a>Fundación</li>
    <li><a href="foucault-pendulum.html"></a>El Péndulo de Foucault</li>
</ul>

对应的CSS样式 #

通过隐藏默认列表符号，用伪元素模拟可点击的项目符号：

/* 移除默认列表符号，调整内边距保证文本对齐 */
ul {
    list-style: none;
    padding-left: 1.5em;
}

/* 限制链接点击区域仅覆盖符号范围 */
li a {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 0.5em;
    position: relative;
    text-indent: -9999px; /* 隐藏a标签的空内容 */
}

/* 用伪元素生成项目符号，继承链接属性 */
li a::before {
    content: "•";
    position: absolute;
    left: 9999px;
    top: 0;
    color: #0066cc;
    font-size: 1.2em;
    cursor: pointer;
}

/* 可选：添加hover效果增强交互反馈 */
li a:hover::before {
    color: #004499;
    text-decoration: underline;
}

原理说明 #

1. 移除<ul>默认列表符号，避免与自定义符号冲突；
2. 空<a>标签作为点击容器，通过尺寸限制和文本缩进隐藏自身内容，仅保留符号大小的点击区域；
3. 利用::before伪元素生成项目符号，通过绝对定位移回可见区域，同时继承<a>的链接属性，实现仅符号可点击的效果。

内容的提问来源于stack exchange，提问作者Feuergeist