<div class="dtag">相关阅读</div>
<ul class="relatednews">
<li class="no1"><a href="链接1" title="标题1</a></li><li class="no2"><a href="链接1" title="标题2</a></li><li class="no3"><a href="链接1" title="标题3</a></li> …… </ul>
</div>
1. 左侧小圆点风格（简洁清爽）
.relatednews li { position: relative; padding-left: 16px; margin-bottom: 6px; line-height: 1.6; } .relatednews li::before { content: ""; width: 5px; height: 5px; background: #e53e3e; border-radius: 50%; position: absolute; left: 0; top: 10px; }
2. 左侧竖线标签（简约高级）
.relatednews li { border-left: 3px solid #e53e3e; padding-left: 12px; margin-bottom: 8px; line-height: 1.6; } .relatednews li:hover { border-left-color: #ff6b6b; }
3. 鼠标悬浮下划线（文字链接常用）
.relatednews li { margin-bottom: 6px; line-height: 1.6; } .relatednews li a { position: relative; } .relatednews li a::after { content: ""; width: 0; height: 2px; background: #e53e3e; position: absolute; left: 0; bottom: -3px; transition: width .3s; } .relatednews li a:hover::after { width: 100%; }
4. 背景悬浮卡片（新闻列表好看）
.relatednews li { padding: 8px 12px; border-radius: 6px; margin-bottom: 6px; transition: background .3s; } .relatednews li:hover { background: #fff5f5; }
5. 右侧小箭头样式
.relatednews li { position: relative; padding-right: 18px; margin-bottom: 6px; line-height: 1.6; } .relatednews li::after { content: ">"; position: absolute; right: 0; top: 0; color: #999; font-size: 12px; } .relatednews li:hover::after { color: #e53e3e; }
6. 序号数字样式（1、2、3… 自动排列）
.relatednews { counter-reset: num; } .relatednews li { position: relative; padding-left: 28px; margin-bottom: 8px; line-height: 1.6; } .relatednews li::before { counter-increment: num; content: counter(num); position: absolute; left: 0; top: 1px; width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 12px; color: #fff; background: #e53e3e; border-radius: 50%; }
7. 虚线分隔线列表
.relatednews li { padding: 6px 0; border-bottom: 1px dashed #eee; margin-bottom: 4px; } .relatednews li:last-child { border-bottom: none; }
