大致结构:
.latestNews
.latestNewsTitle 标题1
.latestNewsContent
.News 内容1
.News 内容2
css实现效果:使用::before 对内容前的小方块进行css绘制即可
.latestNewsContent {
padding-bottom: 16px;
.News {
padding-left: 4px;
font-size: 12px;
font-family: DINPro-Medium, DINPro;
font-weight: 500;
color: rgba(102, 102, 102, 1);
line-height: 15px;
&::before {
display: inline-block;
width: 4px;
height: 8px;
background: rgba(30, 147, 243, 1);
content: '';
/**
这个指为正的话 小方块就往上, 为负的话,小方块就往下
*/
vertical-align: 1px;
margin-right: 10px;
}
}
}
标签:小方块,方框,列表,DINPro,102,News,font,css
来源: https://www.cnblogs.com/yycode01/p/13231641.html