UL List – disturbing line after last LI

September 2, 2022

I don’t necessarily know how to describe my problem. Just after creating the list, a dash appears after the last <li> tag (see photo in the attachment). How can i remove that line? Can you help me please?

Photo desribing my problem

Code bellow:

CSS:

#app_ulist ul {
    padding-left: 30px;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2; 
    list-style-type: none; 
    position: relative;
}

#app_ulist>ul>li:before {
    content: "\2713";
}

#app_ulist>ul:after, #app_ulist>ul:before {
    content: " ";
    display: table;
}

#app_ulist>ul>li:before {
    color: #fff;
    display: block;
    font-family: fontello;
    font-size: 12px;
    font-weight: 400;
    left: -29px;
    line-height: 20px;
    margin-top: -1px;
    position: absolute;
    text-align: center;
    width: 20px;
    text-indent: 1px;
}

#app_ulist>ul>li {
    margin-bottom: 10px;
    padding-top: 0;
    position: relative;
}
#app_ulist> ul > li::before {
    background-color: #698e9e;
}

HTML:

<div id="app_ulist" class="mt-5">
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</div>

>Solution :

You need to remove the margin-top: -1px from #app_ulist>ul>li:before.

#app_ulist>ul>li:before {
color: #fff;
display: block;
font-family: fontello;
font-size: 12px;
font-weight: 400;
left: -29px;
line-height: 20px;
position: absolute;
text-align: center;
width: 20px;
text-indent: 1px;

}