html带正方形项目列表,css之列表数据前加上小方框

大致结构：

.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;

}

}

}

原文：https://www.cnblogs.com/yycode01/p/13231641.html