首页 > Web开发 > 详细

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

时间:2020-07-03 18:31:58      阅读:138      评论:0      收藏:0      [点我收藏+]

大致结构:

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

  

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

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!