CSS伪元素实现带间距的分割线效果-程序员充电站

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS伪元素实现带间距的分割线效果</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; background: #F0F3F5; padding: 40px 20px; } .container { max-width: 800px; margin: 0 auto; } h1 { text-align: center; color: #001A33; margin-bottom: 40px; font-size: 32px; } .demo-section { margin-bottom: 60px; } .demo-title { font-size: 20px; color: #53606B; margin-bottom: 20px; padding-left: 12px; border-left: 4px solid #0080FF; } /* 方法一: 传统border方式 (不推荐) */ .news-list-old { background: white; border-radius: 12px; overflow: hidden; } .news-item-old { background: white; padding: 32px; text-align: left; border-bottom: 1px solid #E5E5E5; } .news-item-old:last-child { border-bottom: none; } /* 方法二: 使用伪元素 (推荐) */ .news-list-new { background: white; border-radius: 12px; overflow: hidden; } .news-item-new { background: white; padding: 32px; text-align: left; position: relative; } .news-item-new::after { content: ''; position: absolute; bottom: 0; left: 32px; right: 32px; height: 1px; background: #E5E5E5; } .news-item-new:last-child::after { display: none; } .news-item-title { font-size: 18px; font-weight: 500; color: #001A33; margin-bottom: 8px; line-height: 1.4; } .news-item-date { font-size: 14px; color: #53606B; } .code-section { background: #282c34; color: #abb2bf; padding: 24px; border-radius: 8px; overflow-x: auto; margin-top: 20px; } .code-section code { font-family: "Consolas", "Monaco", "Courier New", monospace; font-size: 14px; line-height: 1.6; } .keyword { color: #c678dd; } .property { color: #e06c75; } .value { color: #98c379; } .comment { color: #5c6370; font-style: italic; } .highlight-box { background: #fff3cd; border-left: 4px solid #ffc107; padding: 16px; margin: 20px 0; border-radius: 4px; } .highlight-box p { color: #856404; line-height: 1.6; } .comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; } @media (max-width: 768px) { .comparison { grid-template-columns: 1fr; } } </style> </head> <body> <div class="container"> <h1>CSS伪元素实现带间距的分割线效果</h1> <div class="demo-section"> <div class="demo-title">❌ 方法一：传统border方式（分割线顶边）</div> <div class="news-list-old"> <div class="news-item-old"> <div class="news-item-title">乌镇峰会重磅发布，全球 AI 标准发展报告新鲜出炉</div> <div class="news-item-date">2025-11-11</div> </div> <div class="news-item-old"> <div class="news-item-title">十五五规划放大招！AI将从技术突破到全民赋能</div> <div class="news-item-date">2025-11-10</div> </div> <div class="news-item-old"> <div class="news-item-title">科研智能体：AI赋能的全流程解决方案</div> <div class="news-item-date">2025-11-10</div> </div> </div> <div class="code-section"> <code> <span class="comment">/* 传统方式：分割线从左到右贯穿整个容器 */</span> <span class="keyword">.news-item</span> { <span class="property">border-bottom</span>: <span class="value">1px solid #E5E5E5</span>; } <span class="keyword">.news-item:last-child</span> { <span class="property">border-bottom</span>: <span class="value">none</span>; } </code> </div> <div class="highlight-box"> <p><strong>问题：</strong>使用 border-bottom 会导致分割线从容器的最左侧延伸到最右侧，没有留白间距，视觉上显得不够精致。</p> </div> </div> <div class="demo-section"> <div class="demo-title">✅ 方法二：使用伪元素（推荐，左右留白）</div> <div class="news-list-new"> <div class="news-item-new"> <div class="news-item-title">乌镇峰会重磅发布，全球 AI 标准发展报告新鲜出炉</div> <div class="news-item-date">2025-11-11</div> </div> <div class="news-item-new"> <div class="news-item-title">十五五规划放大招！AI将从技术突破到全民赋能</div> <div class="news-item-date">2025-11-10</div> </div> <div class="news-item-new"> <div class="news-item-title">科研智能体：AI赋能的全流程解决方案</div> <div class="news-item-date">2025-11-10</div> </div> </div> <div class="code-section"> <code> <span class="comment">/* 使用伪元素：分割线左右留白，更精致 */</span> <span class="keyword">.news-item</span> { <span class="property">position</span>: <span class="value">relative</span>; } <span class="keyword">.news-item::after</span> { <span class="property">content</span>: <span class="value">''</span>; <span class="property">position</span>: <span class="value">absolute</span>; <span class="property">bottom</span>: <span class="value">0</span>; <span class="property">left</span>: <span class="value">32px</span>; <span class="comment">/* 左侧间距 */</span> <span class="property">right</span>: <span class="value">32px</span>; <span class="comment">/* 右侧间距 */</span> <span class="property">height</span>: <span class="value">1px</span>; <span class="property">background</span>: <span class="value">#E5E5E5</span>; } <span class="keyword">.news-item:last-child::after</span> { <span class="property">display</span>: <span class="value">none</span>; <span class="comment">/* 最后一项不显示分割线 */</span> } </code> </div> <div class="highlight-box"> <p><strong>优势：</strong>通过 ::after 伪元素创建的分割线可以精确控制位置，通过 left 和 right 属性设置左右间距，让设计更加精致美观，符合现代UI设计规范。</p> </div> </div> <div class="demo-section"> <div class="demo-title">💡 核心原理解析</div> <div style="background: white; padding: 24px; border-radius: 8px; line-height: 1.8; color: #53606B;"> <p><strong style="color: #001A33;">1. position: relative</strong></p> <p style="margin-bottom: 16px;">为父元素设置相对定位，使伪元素可以相对于父元素进行绝对定位。</p> <p><strong style="color: #001A33;">2. ::after 伪元素</strong></p> <p style="margin-bottom: 16px;">使用 ::after 在元素内容后创建一个伪元素，不会增加额外的 DOM 节点。</p> <p><strong style="color: #001A33;">3. left 和 right 定位</strong></p> <p style="margin-bottom: 16px;">通过 left: 32px 和 right: 32px 控制分割线的起始和结束位置，实现左右留白效果。</p> <p><strong style="color: #001A33;">4. 最后一项特殊处理</strong></p> <p>使用 :last-child::after { display: none; } 隐藏最后一项的分割线，避免多余的视觉元素。</p> </div> </div> </div> </body> </html>

进阶技巧

1. 响应式间距

.news-item::after { left: 32px; right: 32px; } @media (max-width: 768px) { .news-item::after { left: 16px; /* 移动端缩小间距 */ right: 16px; } }

2. 渐变分割线

.news-item::after { background: linear-gradient( to right, transparent, #E5E5E5 10%, #E5E5E5 90%, transparent ); }

3. 虚线效果

.news-item::after { background-image: linear-gradient( to right, #E5E5E5 50%, transparent 50% ); background-size: 8px 1px; background-repeat: repeat-x; }

4. 动态颜色

.news-item::after { background: var(--divider-color, #E5E5E5); transition: background 0.3s ease; } .news-item:hover::after { background: var(--divider-hover-color, #0080FF); }