需要像Tech Crunch博客循环中的CSS

Question

看一下这个截图

我需要一个左侧部分的CSS，其中包含圆圈...如何在Tech Post中为我的Blog Post循环启用此功能。

Answer 1

我想你想要这样的东西。我希望它会对你有所帮助。

＆＃13;

＆＃13;

	*{margin: 0;padding: 0;font-family: arial;}
	.left-section{width: 160px;border-right: 2px solid #e8e8e8;min-height: 200px;}
	ul{padding: 10px 0;}
	ul li{width: 130px;background: #e8e8e8;font-weight: bold;font-size: 14px;height: 30px;padding: 6px;box-sizing:border-box;position: relative;margin-bottom: 10px}
	ul li:before{content: '';width: 0; height: 0; border-top: 16px solid transparent;border-bottom: 15px solid transparent;border-left: 15px solid #e8e8e8;position: absolute;right:-15px;top:0;}
	ul li:after{content: '';height: 12px;width: 12px;background: #fff;border:2px solid #d2d3d2;position: absolute;border-radius:20px;right: -40px;top:8px;}

＆＃13;

<div class="left-section">
  <ul>
    <li>6 hours ago</li>
    <li>7 hours ago</li>
    <li>8 hours ago</li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;