Make an inner circle within a larger circle and customize the background

Question

Make an inner circle within a larger circle and customize the background

After finding an image online displaying a timeline with text above and below each bullet point, I decided to create my own version. You can view the result in this demo

Here is the HTML code:

<ul class="timeline" id="timeline">
    <li class="li complete">
      <div class="timestamp">
        <span>Expire:</span>
        <span>Hours: </span>
      </div>
      <div class="bullet">
        <h5>Awarded Time</h5>
      </div>
    </li>
    <li class="li complete">
      <div class="timestamp">
        <span>Expire:</span>
        <span>Hours:  </span>
      </div>
      <div class="bullet">
        <h5>Advance Time</h5>
      </div>
    </li>
    <li class="li complete">
      <div class="timestamp">
        <span>Available Time: </span>
        <span>&nbsp;</span>
      </div>
      <div class="bullet">
        <h5>Total</h5>
      </div>
    </li>
</ul>

Inspired by a specific image featuring an additional bullet within each bullet point, I would like to achieve a similar effect. Here's an example of what I'm aiming for:

https://i.sstatic.net/CipJs.png

What steps should I take to implement this nested bullet structure?

html css

Answer 1

Answer №1

Inspect the code carefully to identify the section responsible for styling the bullet point's background.

An effective method is to use your browser's developer tools to inspect and manipulate different background colors, helping you locate the relevant CSS properties.

In this instance, I discovered that the before pseudo element of the bullet was controlling the background, so I made modifications to give it a border and a new background color:

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

Note: Pseudo elements are now denoted with a double colon to differentiate them from pseudo-classes, although browsers generally still support :before for compatibility reasons.

Answer 2

Inspect the code carefully to identify the section responsible for styling the bullet point's background.

An effective method is to use your browser's developer tools to inspect and manipulate different background colors, helping you locate the relevant CSS properties.

In this instance, I discovered that the before pseudo element of the bullet was controlling the background, so I made modifications to give it a border and a new background color:

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

Note: Pseudo elements are now denoted with a double colon to differentiate them from pseudo-classes, although browsers generally still support :before for compatibility reasons.

Answer 3

Answer №2

In each div labeled as bullet, a new div should be inserted with identical dimensions and positioning as the circular shapes (.bullet:before). Furthermore, include properties such as display:flex, align-items:center, and justify-content:center within this div. Inside this newly added div, create another one with dimensions of 70% for both height and width, a border-radius of 50%, and a unique background-color.

HTML:

<div class="bullet">
    <div class="inside">
      <div class="circle"></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;
}

Answer 4

In each div labeled as bullet, a new div should be inserted with identical dimensions and positioning as the circular shapes (.bullet:before). Furthermore, include properties such as display:flex, align-items:center, and justify-content:center within this div. Inside this newly added div, create another one with dimensions of 70% for both height and width, a border-radius of 50%, and a unique background-color.

HTML:

<div class="bullet">
    <div class="inside">
      <div class="circle"></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;
}

Make an inner circle within a larger circle and customize the background

Answer №1

Answer №2

Similar questions

A technique for adding a border to a Mat Card that mimics the outline of a Mat Form Field within a custom

Customizing Javascript for Mouse Exiting Browser Window

Position an element in the middle of the range between the tallest and shortest characters

Achieving a responsive card layout in Reactjs with Bootstrap by displaying four cards in a single row

Angular - issue with getting window.screen.height in template

The input field does not accept any values even after setting it to be editable

Ways to stop a background image from repeating?

Exploring HTML5 video playback in AngularJS

Ensuring Quick Response Times When Incorporating Personalized Text Styles into Twitter Bootstrap

Creating stylish grid-based tables in Bootstrap 4

Calculating values within dynamically generated elements requires utilizing JavaScript to target and extract the

Automatically Populate Text Field with the URL of the Current Page

Is the absence of http(s) in <link ...> causing any issues?

Switch between display modes using a button and CSS media query

Elements missing from the Bootstrap 5 framework

The "hidden" class in Bootstrap 4 is not functioning as expected

designing alternating rows within a table

Prevent automatic image blurring within an SVGZ file

Tips for creating a high-quality file upload button in Laravel 5 using Bootstrap 4

maintaining the consistent stylesheet and displaying data on the same page dilemma