Steps to create interconnected circles using CSS

Currently, I am attempting to create a set of steps using only CSS. Here is what I have achieved so far:

https://i.sstatic.net/sCRzr.jpg

However, I am facing an issue with removing the excess line where the red mark is located.

 <ul class="step">

    <li class="first">
        <span>1</span>
    </li>
    <li class="second">
        <span>2</span>
    </li>
    <li class="third">
        <span>3</span>
    </li>
    <li class="last ">
       <span>4</span>
    </li>
</ul>

section.steps .steps-box .steps-container ul.step{
    margin: 0;
    list-style: none;
    border-top: 1px dotted #000;
}
section.steps .steps-box .steps-container ul.step > li{
    float: left;
    width: 25%;
    margin-top: -40px;
    padding: 0 10px;
}
section.steps .steps-box .steps-container ul.step li span{
    display: block;
    margin: 0 auto;
    height: 80px;
    width: 80px;
    line-height: 80px;
    border-radius: 80px;
    border: 1px solid;
    overflow: hidden;
    text-align: center
}

I am looking to have a line connecting steps from 1 to 4 only, but I want to achieve this without using images. Can anyone provide guidance on how to accomplish this?

Your assistance is greatly appreciated!

htmlcsshtml-lists

Answer №1

Consider a different approach rather than using a list for the layout. For example:

<div class="connected-steps">
  <div class="step">1</div>
  <div class="connector"></div>
  <div class="step">2</div>
  <div class="connector"></div>
  <div class="step">3</div>
</div>

Apply display:flex to the container and allow the .connector to expand and fill the space between the .step elements.

.connected-steps {
  display: flex;
  width: 100%;
  align-items: center;
}

.step {
  color: white;
  background-color: red;
  display: block;
  border-radius: 10px;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
}

.connector {
  flex-grow: 1; //fill the space
  width: 10px;
  content: "";
  display: block;
  height: 1px;
  background-color: red;
}

Check out the live example here: https://codepen.io/bondartrq/pen/QOKxGR

This layout is fully responsive, and you can experiment with the flex properties of the container to change the order and orientation...

Best of luck!

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

Ways to modify the text color of an inactive TextField in Material UI React JS

After researching how to change the disabled TextField font color on Stack Overflow, I implemented the solution using Material-UI. However, when I tried to create a new customized TextField based on the example provided, it did not work as expected and dis ...

cssreactjsmaterial-uitextfieldreact-with-styles

JavaScript - AngularJS HTML parser

I am working with an array that contains content along with HTML tags, and here is the code snippet: for (car in cars.parking[0]){ content.push('<br />'); for (token in cars.parking[0].now) { content.pus ...

javascripthtmlangularjs

css, asp:listview and the use of the nth-child selector

Striving to enhance my CSS3 skills and move away from using table tags in my ASP.NET project, I am currently working with Visual Studio 2010, .NET 4.0, and VB.Net. Specifically, I am facing an issue with a listview where I am attempting to alternate the ro ...

asp.netcsslistview

PHP and MySQLi for inserting records into database

Currently, I am attempting to retrieve user input values from a form and store them in a database using PHP. Below is the contents of my dbConfig file: <?php $mysqli = new mysqli("localhost", "root", "password", "testDB"); /* checking connecti ...

phphtmlmysqli

Is there any way to extract the source files from a compiled Electron application?

Is there a way to extract the contents of a .app Application developed using Electron for Mac OS? I'm eager to explore the underlying source files, but I'm not familiar with the procedure to access them. Any assistance would be greatly appreciate ...

javascripthtmlnode.jsmacoselectron

Switching Flexbox CSS from a column layout to a row orientation

When the viewport width reaches 750px, I want to use flexbox to change the layout of my information from one column to four rows: * { box-sizing: border-box; } h1, h2, h3, h4, h5, h6 { text-align: center; } section { border: inset #333 thin; p ...

htmlcssflexbox

I am facing difficulties displaying Arabic language characters on my HTML code

I created a website and included the following meta tag in the head section: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> However, all Arabic text appears distorted as shown in the image. Interestingly, when I manually cha ...

phphtmlcss

Implementing a CSS codepen within a React Material-UI component

I'm struggling to implement this effect on my material ui card component using react and makeStyles. I am having difficulty translating this effect to the cards, could someone assist me in simplifying it into a CSS code that can be used in MakeStyles? ...

cssreactjsmaterial-uicodepen

JavaScript event listener 'click' not functioning properly

I'm facing an issue with a click event in a script that is associated with a specific div id. When I move the mouse within the div area and click (the cursor remains unchanged), the event listener does not activate. How can I make the div area clickab ...

javascripthtmlcss

Step-by-step guide on displaying a checkbox list based on the selected option in a drop-down menu

Apologies for the lackluster title. My goal is to create a dynamic checklist based on selections made from a drop-down menu: The drop-down menu offers several options, and when a choice is made, I want a corresponding checklist to appear below it with dep ...

javascripthtmldrop-down-menu

I am interested in extracting information from a website by utilizing PHP

Can data be scrapped from a website using PHP without the use of any external tools? I attempted with the following code, but it proved to be insufficient: <?php $url = 'http://www.example.com'; $output = file_get_contents($url); echo $output ...

phphtml

Having trouble understanding how to create a continuous loop for a CSS animation within the KreatureMedia Layerslider

Currently, I am using KreatureMedias Layerslider and trying to make a fullwidth wave bob up and down. This is what I have at the moment... <img class="ls-layer" data-ls="durationin:1500;scalein:1.1;offsetxin:-50;loopcount:-1;loopoffsetx:0sw;loopoffset ...

jqueryhtmlcssanimationplugins

What exactly is HTML cloud storage all about?

As I work on developing an app through phonegap, one question that comes to mind is the possibility of storing information online. For instance, if there's a number variable that increases when a button is pressed, can this value be saved somewhere an ...

javascripthtmldata-storage

Utilizing jQuery to toggle nested divs within identical parent divs when they contain more than three elements using the :nth-child selector

Within my HTML markup, I have created two parent div elements that are exactly the same but contain different content. My goal is to have a functionality where if a parent div has more than 3 child div elements, a "show more" text will be displayed at the ...

javascriptjqueryhtmlcss

Creating a visually engaging parallax effect in two columns with differing lengths that align perfectly at the conclusion

Recently, I came across an interesting layout technique on Apple's website that involves two columns with different lengths. As you scroll down the page, one column slows down to align with the other so that they both meet at the bottom. You can chec ...

jquerycsshtmltwitter-bootstrapparallax

Dynamic filtering of items using Knockout's foreach binding based on value change

I'm working on some HTML/Knockout code where I want to display a dayDivider div only when there is a new date. This means that messages from the same day should appear under a date banner. Typically, I would save the last value in a temporary variable ...

jqueryhtmlknockout.js

Aptana HTML Editor displays a blank page

Currently, I have Aptana set up as a plugin within Eclipse Neon. To create my HTML file, I used the template found at "New From Template => HTML => HTML 4.0.1 Strict Template (*.html)". The issue I am facing is that when I click on the file in the P ...

htmleditoraptana

Creating an Image with a specified form action

echo "<img src=\"{$recipe['image']}\" height=100 width=100 /><br />"; echo '<form action="php/recipe.php?id='.$recipe_id.'&img='.{$recipe['image']'}.'" method="POST">'; echo ...

phphtml

Choosing between setting a height of 100vh versus a minimum height of 100vh

In the development of my app, I noticed an interesting issue. When I set the background on the html with a height of 100vh and resize the viewport to cause vertical overflow, the background does not cover the overflowed content: html { height ...

htmlcss

Clicking outside of Bootstrap Modal inputs causes them to lose focus

Currently, I am tackling a challenge involving 2 bootstrap modals located on the same page with Bootstrap version 2.3.2. A frustrating issue that has arisen is that whenever either modal appears, the first time you click on any of the inputs within the mo ...

javascriptjqueryhtmlcsstwitter-bootstrap