How to create an horizontal Line with dots over it

Question

I am doing a school project where I have to create a horizontal line that has some dots over it.

I cannot use css as a separated file. The css needs to be inside the tag of HTML.

For example:

I already created the horizontal line, but I cannot create the dots over it.

Answer 1

Here is my solution :

.wraper {
  padding: 50px;
  text-align: center;
  font-family: sans-serif;
  width: 500px;
  margin: 10px auto;
}

h1 {
  margin: 50px auto;
}

.container {
  border-top: 2px solid #000;
  display: flex;
  list-style: none;
  padding: 0;
  justify-content: space-between;
  align-items: stretch;
  align-content: stretch;
}

.link {
  position: relative;
  margin-top: 10px;
  width: 100%;
}

.link a {
  font-weight: bold;
  text-decoration: none;
  color: black;
  text-transform: uppercase;
  font-size: 15px;
}

.link:first-child {
  margin-left: -55px;
}

.link:last-child {
  margin-right: -55px;
}

.link::after {
  content: "";
  width: 10px;
  height: 10px;
  background: #fff;
  position: absolute;
  border-radius: 10px;
  top: -18px;
  left: 50%;
  transform: translatex(-50%);
  border: 2px solid black;
}

.active::after,
.link:hover::after {
  background: black;
}

p.lead {
  font-weight: 600;
  margin: 50px auto;
  line-height: 1.5;
}

<div class="wraper">
  <h1>How We Work</h1>

  <ul class="container">
    <li class="link"><a href="">Identify</a></li>
    <li class="link"><a href="">Form</a></li>
    <li class="link active"><a href="">Develop</a></li>
    <li class="link"><a href="">Launch</a></li>
    <li class="link"><a href="">Grow</a></li>
  </ul>

  <p class="lead">A streamlined team of co-founders is brought together to create and lead the company, empowering a new generation of entrepreneurs.</p>
</div>

Hope you need it :)

Answer 2

You could include something like:

<div style="margin:50px;width:450px;height:25px;overflow:hidden;">
  <div style="width:550px;height:2px;background:black;position:relative;top:5px;">
    <div style="float:left;width:10px;height:10px;background:black;border-radius:50%;position:relative;top:-4px;margin-right:100px;"></div>
    <div style="float:left;width:10px;height:10px;background:black;border-radius:50%;position:relative;top:-4px;margin-right:100px;"></div>
    <div style="float:left;width:10px;height:10px;background:black;border-radius:50%;position:relative;top:-4px;margin-right:100px;"></div>
    <div style="float:left;width:10px;height:10px;background:black;border-radius:50%;position:relative;top:-4px;margin-right:100px;"></div>
    <div style="float:left;width:10px;height:10px;background:black;border-radius:50%;position:relative;top:-4px;margin-right:100px;"></div>
  </div>
</div>

<div style="width:550px;height:2px;position:relative;left:45px;top:-55px;">
    <div style="float:left;width:10px;height:10px;position:relative;top:-4px;margin-right:100px;">text</div>
    <div style="float:left;width:10px;height:10px;position:relative;top:-4px;margin-right:100px;">some other text</div>
    <div style="float:left;width:10px;height:10px;position:relative;top:-4px;margin-right:100px;">some more text</div>
    <div style="float:left;width:10px;height:10px;position:relative;top:-4px;margin-right:100px;">guess what! text!</div>
    <div style="float:left;width:10px;height:10px;position:relative;top:-4px;margin-right:100px;">text again</div>
  </div>

The dots have margins on their right to make the spacing and they are position relative to make sure they are on the line. A wrapper has been added to hide an extra part on the right of the black line which was needed due to the right margin on the last dot (otherwise the dot would have gone onto the next line).

You can also add text using the last part of the html code above.