Insert straight lines between elements in an inline list

I am working on building a step progress bar using the HTML code below:

.fa-check-circle {
  color: #5EB4FF;
}

.fa-circle {
  color: #CFD7E6;
  font-size: 14px;
}

.container {
  width: 100%;
  position: absolute;
  z-index: 1;
  margin-top: 20px;
}

.progressbar {
  list-style-type: none;
  display: flex;
  align-items: center;
}

.divider {
  flex-grow: 1;
  border-bottom: 1px solid black;
  margin: 5px
}

.progressbar li {
  float: left;
  width: 15%;
  position: relative;
  text-align: center;
}

.fr-inactive-radio {
  background: #CFD7E6;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<ul class="progressbar m-0">
  <li>
    <span><i class="fa fa-check-circle mt-1 progress-dot"></i></span>
  </li>
  <li>
    <span><i class="fa fa-check-circle mt-1 progress-dot"></i></span>
  </li>
  <li>
    <span><input type="radio" checked="checked" class="progress-dot"></span>
  </li>
  <li>
    <span><i class="fa fa-circle progress-dot"></i></span>
  </li>
  <li>
    <span><i class="fa fa-circle progress-dot"></i></span>
  </li>
</ul>

After implementing this code, the current result can be seen here: https://i.sstatic.net/ErnHC.png

I am interested in adding horizontal lines between the bullets as shown in the following image: https://i.sstatic.net/k9aNh.png

Is there a way to add horizontal lines between the points I have created using only CSS (if possible)?

htmlcssflexboxfont-awesome

Answer №1

One way to create a gradient effect is by using the following code:

.fa-check-circle {
  color: #5EB4FF;
}

.fa-circle {
  color: #CFD7E6;
  font-size: 14px;
}

.progressbar {
  list-style-type: none;
  display: flex;
  align-items: center;
  padding:0;
    background: 
    linear-gradient(to right,transparent 0,transparent calc(15% * 4),#fff calc(15% * 4)) calc(15% * 5) no-repeat,
    repeating-linear-gradient(to right,transparent 0,transparent 20px,blue 20px, blue calc(15% - 5px),transparent calc(15% - 5px),transparent 15%) 0 50%/100% 5px no-repeat;
}

.divider {
  flex-grow: 1;
  border-bottom: 1px solid black;
  margin: 5px
}

.progressbar li {
  width: 15%;
}
.progressbar li span {
  width:20px;
  display:inline-block;
}

.fr-inactive-radio {
  background: #CFD7E6;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<ul class="progressbar m-0">
  <li>
    <span><i class="fa fa-check-circle mt-1 progress-dot"></i></span>
  </li>
  <li>
    <span><i class="fa fa-check-circle mt-1 progress-dot"></i></span>
  </li>
  <li>
    <span><input type="radio" checked="checked" class="progress-dot"></span>
  </li>
  <li>
    <span><i class="fa fa-circle progress-dot"></i></span>
  </li>
  <li>
    <span><i class="fa fa-circle progress-dot"></i></span>
  </li>
</ul>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular app encounters issue with Firebase definition post Firebase migration

Hey there, I'm currently facing an issue while trying to fetch data from my Firebase database using Angular. The error message 'firebase is not defined' keeps appearing. var config = { databaseURL: 'https://console.firebase.google. ...

javascripthtmlangularjsfirebase

Can you explain the distinction between sockets and proxy passing in nginx compared to uwsgi?

My latest project setup involves flask, uwsgi, and nginx. The backend solely serves json data through an API, while the client side takes care of rendering. Typically, my Nginx configuration looks like this: My usual setup (with basic proxy passing): se ...

javascripthtmlnginx

Align the top navigation centered horizontally, with the logo on the left and language selection on the right

Is there a way to center my menu horizontally while keeping the logo aligned to the left and language selection to the right, all with consistent proportions when resizing? I've tried various suggestions but nothing seems to work for my navigation bar ...

htmlcss

Select only eBook files using this HTML form: {file-type}

I am looking to implement a form that includes an option to upload files by selecting "choose file". However, I want to restrict the displayed files to only show .epub and .mobi files when the user opens the selection pop-up box on their operating system. ...

htmlformsselectuploadfile-type

Should I consider implementing Flexbox even if I need to cater to users still using IE9?

Currently, I am embarking on a fresh project centered around constructing a chat window. Typically, I would readily employ Flexbox for this endeavor; nevertheless, one of the stipulations for this project is to ensure compatibility with IE9. While I under ...

cssflexboxmodernizr

Is it possible to activate the nearby dropdown based on the user's selection?

On my html webpage, I have a form that consists of three dropdown menus each with different options: The first dropdown (A) includes choices from 1 to 6, as well as 'not set'. The second dropdown (B) allows selections from 1 to 7, and also has ...

javascriptjqueryhtmldrop-down-menu

CSS3 family tree tutorial: Incorporating a wife into the design

I came across a fascinating tutorial about creating a family tree using CSS3 only. However, I'm struggling to understand how to depict a marriage. To explain further: What the code currently accomplishes is this: what i aim to include is this: Alth ...

htmlcssfamily-tree

Make the text within the CSS style of ".well" wrap around the width

I am looking to style the width of a .well class to be in proportion with the text inside a simple textbox that it contains. What is the best approach to achieve this sizing using CSS? ...

htmlcsstwitter-bootstrap

Create a circular status button that overlays on top of another element using CSS

Looking to enhance my CSS skills! Seeking advice on creating a status button that changes color based on chat availability and positioning it on top of another button. https://i.sstatic.net/iU8wi.png ...

htmlcss

Retrieving list item contents using PHP DOM scraping

Is it possible to use PHP DOM screen scraping to extract the content from an HTML tag named <li style="margin-top:10px"> that appears on one of my web pages? I am looking to retrieve all the data within the <li> tag and present it as HTML co ...

phphtmldom

The functionality of two-way data binding seems to be failing when it comes to interacting with Knock

I am currently working on a piece of code that consists of two main functions. When 'Add more' is clicked, a new value is added to the observable array and a new text box is displayed on the UI. Upon clicking Save, the values in the text boxes ...

javascripthtmlmvvmdata-bindingknockout.js

Challenges Arising from CGI Scripts

One requirement for the user is to input text into a designated text field within a form element in my HTML. Following this, a CGI script processes the user's input and JavaScript code is responsible for displaying the processed information. JavaScri ...

javascripthtmlajaxperlcgi

Learn how to collapse a collapsible section in Jquery Mobile by clicking on a link. Check out the example on JSFiddle

Is there a way to make the data-role collapsible collapse when clicking a tab link? I've tried using an on-click function without success. Any ideas or alternative solutions? Thanks. Check out my JSFiddle, where you can see that the tabs change but t ...

javascriptjqueryhtmljquery-mobile

Automatically adjust text size within div based on width dimensions

Dealing with a specific issue here. I have a div that has a fixed width and height (227px x 27px). Inside this div, there is content such as First and Last name, which can vary in length. Sometimes the name is short, leaving empty space in the div, but som ...

javascriptjqueryhtmlcssresponsive-design

Discover the power of using SVG sprites in Vue JS for dynamic, visually appealing CSS background

Utilizing an SVG sprite file in a Vue JS HTML template is successful with the following setup: <svg class="icon"> <use xlink:href="~@/assets/images/icons.svg#edit"></use> </svg> The contents of the icons.svg file typically resem ...

cssvue.jssvg

What exactly happened to my buttons when I transition to the mobile display?

Due to time constraints, I decided to save some time by utilizing a CSS template called Horizons created by Templated. This particular CSS template uses Javascript to adjust the layout for mobile devices, causing buttons to switch from inline to block for ...

javascriptphphtmlcss

Building custom components in Vue.js/NuxtJS can be a breeze when using a default design that can be easily customized through a JSON configuration

Currently, I am in the process of developing a NuxtJS website where the pages and components can either have a generic design by default or be customizable based on client specifications provided in the URL. The URL structure is as follows: http://localh ...

javascriptcssjsonvue.jsnuxt.js

What is the difference between using min-height in vh versus % for the body tag

I'm trying to understand a code where the min-height of the body element is set to 100vh after previously defining the height of the html element as 100%. Why is there a need for this specific sequence? body { position: relative; overflow: hidd ...

htmlcss

I need some assistance, please. Can someone explain why the Bootstrap card is staying aligned to the left in mobile view

I've tried everything, but it's still not working. Can anyone help me out? Here are some photos. BEFORE AFTER When I view the card on mobile, I want it to stay centered. Could there be some missing code that I'm overlooking? I would great ...

htmlcsswebframeworksbootstrap-5

Firefox is unable to display SWF files

My code snippet: <div id="sw" style="cursor:pointer" > <object id="swfobj" type="application/x-shockwave-flash"> </object> The JavaScript part: function openfile(filePath) { $("#swfobj").attr("data", filePath); $("#sw ...

javascriptjqueryhtmlfirefoxflash