css之列表数据前加上小方框

大致结构：

<template lang="pug">
  .latestNews
        .latestNewsTitle 标题1
        .latestNewsContent
            .News 内容1
            .News 内容2
</template>

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