这是我的代码，我已经创建了一个面包屑，而不是"；圆圈"；短信，我想在那边画个圈。当我通过CSS做的时候，它把代码弄乱了。我怎样才能在HTML中得到它，而不是"；圈"；文字，圆圈应该来.请参考图片为参考

 /* Steps progressbar */
        .steps-progress-bar {
            margin-bottom: 30px;
            overflow: hidden;
            /*CSS counters to number the steps*/
            counter-reset: step;
            width: 100%;
            padding: 0px;
            margin: 0px;
        }

        .steps-progress-bar li {
            list-style-type: none;
            color: white;
            font-size: 14px;
            width: 25%;
            float: left;
            position: relative;
            text-align: center;
        }

        .steps-progress-bar li p {
            color: #b9b9b9;
        }

        /*progressbar connectors*/
        .steps-progress-bar li:after {
            content: '';
            width: 100%;
            height: 3px;
            background: #eeeeee;
            position: absolute;
            left: -50%;
            top: 20px;
            z-index: -1
        }

        .steps-progress-bar li:first-child:after {
            /*connector not needed before the first step*/
            content: none;
        }

        /*marking active/completed steps green*/
        /*The number of the step and the connector before it = green*/
        .steps-progress-bar li.active:before,
        .steps-progress-bar li.active:after {
            background: #0072DC;
            color: white;
        }

        .steps-progress-bar li.active p {
            color: #0072DC
        }

<代码><；DIV类=“ container-nav ”>；<；H1 style=“ text-align：center ”>；分享您想法<；/H1>；<；UL CLASS=“步骤进度条”>；<；Li ID=“ first-step ” Class=“ active ”>；<；P>；圆圈<；/P>；<；P>；建议<；/p>；<；/Li>；<；Li ID=“第二步”>；<；P>；圆圈<；/P>；<；P>；明细<；/P>；<；/Li>；<；Li ID=“第三步”类=“ ”>；<；P>；圆圈<；/P>；<；P>；联系信息<；/p>；<；/Li>；<；Li ID=“第四步”类=“ ”>；<；P>；圆圈<；/P>；<；P>；提交<；/P>；<；/Li>；<；/UL>；<；/DIV>；

顺晟科技：