SOURCE

<div class="my-list">
	<div class="li">
		<img class="avatar"  src="data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" />
        <span class="name">张三<span>
    </div>
 
    <div class="li">
        <img class="avatar"  src="data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" />
        <span class="name">李四<span>
    </div>
 

    <div class="li">
        <img class="avatar"  src="data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" />
        <span class="name">王五<span>
    </div>
 
</div>

.my-list {
    counter-reset: my-rank;
}

.li {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px dotted gray;

    counter-increment: my-rank my-rank2;
}

.avatar {
    width: 32px;
    height: 32px;
    border: 1px solid gray;
    border-radius: 50%;
    overflow: hidden;
}

.name {
    margin-left: .5em;
}

.li::before {
    padding: 5px;
    font-weight: 600;
    color: orange;
    /* content: "No.1"; */
    content: 'No.' counter(my-rank);
}