How can I design the HTML CSS image?

November 8, 2022

I’m trying to make this design:

What I do is this:

I couldn’t do the round icon in the right corner of Latest and the color change from Premium to Free. Can you help me?

.body-bottom>.filter-menu>ul li {
    display: inline;
}

.body-bottom>.filter-menu>ul li a {
    padding: 15px;
    text-decoration: none;
    color: #222429;
}

.body-bottom>.filter-menu>ul li a:nth-child(2) { /* try */
    color: red;
}

<div class="body-bottom">
    <div class="filter-menu">
           <ul>
               <li><a href="">Latest</a></li>
               <li><a href="">Popular</a></li>
               <li>|</li>
               <li><a href="">Premium</a></li>
               <li><a href="">Free</a></li>
           </ul>
     </div>
</div>

>Solution :

.body-bottom>.filter-menu>ul li {
    display: inline;
}

.body-bottom>.filter-menu>ul li a {
    padding: 15px;
    text-decoration: none;
    color: #222429;
  position:relative;
}

.body-bottom>.filter-menu>ul li:nth-of-type(1) a::after{ /* try */
    content:'';
    width:8px;
    height:8px;
  background-color:red;
  position:absolute;
  top:12px;
  right:4px;
  border-radius:50%;
}


.body-bottom>.filter-menu>ul li:nth-of-type(4) a{ /* try */
    color: orange;
}

.body-bottom>.filter-menu>ul li:nth-of-type(5) a{ /* try */
    color: blue;
}

nth-of-type pseudo-class should be added to the <li> element since you have them listed as siblings. It won’t work when you apply it to the children in this situation. I created the dot as ::after pseudo-class, so there is no additional HTML. It has position:absolute to position it according to the link (position:relative). Let me know if there is something you don’t understand.