Create circle inside another circle and change the background-CodePudding

I created a simple timeline in order to replicate an image that I saw in the internet where I have text above and below each bullet point like this

How can I achieve that?

CodePudding user response：

Look carefully at the code to find which part is setting the background for the bullet point.

One way of doing that is to set backgrounds to different colors using your browser dev tools inspect facility which can lead you to the relevant CSS settings.

In this case this led me to the setting for the before pseudo element of bullet which I then changed to give it a border and a different background color:

.li.complete .bullet::before {
  background-color: #eeeeee;
  border: solid blue 2px;
  transition: all 200ms ease-in;
}

Small note: nowadays pseudo elements are indicated with a double colon to distinguish them from pseudo classes, though browsers tend to still recognise :before for backwards compatibility.

CodePudding user response：

Inside every div with class bullet, add a new div with the same width, height and positions as the circles (.bullet:before) and also add a display:flex, align-items:center and justify-content:center, and inside this div create another div with a height and width of 70%, a border-radius of 50% and a different background-color.

HTML:

<div >
    <div >
      <div ></div>
    </div>
    <h5>Awarded Time</h5>
</div>

CSS:

.inside {
  width: 25px;
  height: 25px;
  position: absolute;
  top: -15px;
  left: 42%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle {
  height: 70%;
  width: 70%;
  border-radius: 50%;
  background-color: #fff;
}