I have been searching for a solution for this both here, and on google with no success.

I want to create a Horizontal line which has dots in the ends.

This is an example:

How can I achieve this with css?

i did try to make something but i didn't go much far

.VecBox {
  background: #FFFFFF;
  mix-blend-mode: normal;
  box-shadow: 0px -3px 15px 5px rgba(65, 65, 65, 0.07);
  border-radius: 20px;
  padding-top: 20px;
  padding-left: 10px;
  padding-bottom: 20px;
}

.pickDate {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  font-variant: small-caps;
  color: #2F312F;
}

.pickTm {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: normal;
  font-size: 15px;
  font-variant: small-caps;
  color: #2F312F;
}

<div >
  <div >
    <div >chembumukku</div>
    <div >alappuzha</div>
  </div>
</div>

<div >
  <div >
    <div >
      <div >07 December 2021</div>
      <div >04 : 15 PM</div>
    </div>
    <div >
      <div >07 December 2021</div>
      <div >04 : 15 PM</div>
    </div>
    <div >
      2 days and 22 hours
    </div>
  </div>
</div>

CodePudding user response：

You can try using the<hr> element (Horizontal Rule) for the line. Then you can add pseudo elements for the circles at the start and end. Pseudo-elements are great for adding styles before and after an element without adding unnecessary markup. It can be used to:

• Style the first letter, or line, of an element.
• Insert content before, or after, the content of an element

Check out W3 schools explanation for ::before and ::after

hr {
  width: 50%;
}

hr::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: red;
  display: inline-block;
  position: absolute;
  left: 25%;
  margin-top: -5px;
}

hr::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: red;
  display: inline-block;
  position: absolute;
  right: 25%;
  margin-top: -5px;
}

<br>
<hr>