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