How to Draw a Vertical, Dotted Line Down Center of Page Using CSS

How to create a vertical dotted line between icons (with example image)

You can achieve this using border-left.

Check this fiddle: fiddle

.icon {    text-align: center;    width: 50px;    background: lightgray;    border-radius: 50%;    border: 2px solid grey;}
.icon > i {  margin: 33% auto;}
.dotted:after {    content:"";    position: absolute;    z-index: -1;    top: 0;    bottom: 0;    left: 50%;    height: 100%;    height: inherit;    border-left: 2px dotted lightgrey;}
.dotted {    position: relative;    margin: 10px auto;    width: 50px;}

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/><div class="dotted">  <div class="icon">    <i class="fa fa-camera-retro"></i>  </div>  <br>  <br>  <br>  <br>  <br>  <div class="icon">    <i class="fa fa-camera-retro"></i>  </div></div>

Vertical line with dots in ends and between

Here's a quick snippet that might help you with your problem:

.bar {  list-style: none;}.bar >li {  position: relative;}.bar>li:before {  content: '\25CF';  margin-right: 10px;  font-size: 20px;}.bar>li:after {  position: absolute;  left: 0;  top: 0;  content: '';  border-left: 2px solid black;  margin-left: 5px;  height: 100%;}.bar >li:first-of-type:after {  top: 50%;}.bar >li:last-of-type:after {  top: -50%;}

<ul class="bar">  <li>element 1</li>  <li>element 2</li>  <li>element 3</li>  <li>element 4</li>  <li>element 5</li></ul>

Displaying a vertical dashed line centrally in a div

The way I would do it is the following:

.wrapping-container {
    position: relative;
    display: flex;
}
.progress-indicator {
    position: relative;
    display: inline-block;
    margin-bottom: 40px;
    color: #fff;
}
.progress-indicator::after {
    content: "";
    width: 30px;
    height: 30px;
    background: #000;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: -1;
}
.progress-indicator::before {
    content: "";
    height: 40px;
    border: 1px dashed #000;
    position: absolute;
    left: 50%;
    top: -50px;
    transform: translateX(-50%);
    z-index: -1;
}
.input {
    margin-left: 30px;
}

<div class="wrapping-container">
    <div class="progress-indicator">2</div>
    <div class="input">Input</div>
</div>  
<div class="wrapping-container">
    <div class="progress-indicator">3</div>
    <div class="input">Input</div>
</div>

How to draw a dotted line with css?

For example:

hr {
  border: none;
  border-top: 1px dotted #f00;
  color: #fff;
  background-color: #fff;
  height: 1px;
  width: 50%;
}

before
<hr>
after

How to make a vertical line in HTML

Put a <div> around the markup where you want the line to appear to next, and use CSS to style it:

.verticalLine {  border-left: thick solid #ff0000;}

<div class="verticalLine">  some other content</div>

Displaying a centred vertical dashed line above div using CSS

Handle this behaviour with absolutely positioned pseudo-elements so that you don't have to wrangle with the natural document flow of elements.

Use CSS counters to handling the incrementing logic programmatically.

Consider responsive container heights as well to account for varying content lengths:

/* BEM naming convention used to keep selectors flat */

.progress-wrapper {
  counter-reset: step;    /* Set a counter named 'step', and its initial value is 0. */
}

.progress-step {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
}

.progress-step::after {
  content: "";
  display: block;
  position: absolute;
  width: 2px;
  left: 11px;               /* relative to marker width */
  top: 5px;                 /* offset top */
  height: 100%;             /* responsive heights */
  margin: auto;
  border-left: 2px dashed black;
  z-index: -1;              /* handle stacking context */
}

.progress-step--no-step::after { /* handle the last exception, not every instance */
  display: none;          
}

.progress-step__marker {
  height: 22px;
  width: 22px;
  margin-right: 16px;
  background-color: red;
  display: flex;
}

.progress-step__marker::before {
  counter-increment: step;  /* Increment the value of section counter by 1 */
  content: counter(step);   /* Display incremented counter value */
  text-align: center;
  width: 100%;
  line-height: 22px;        /* relative to marker height */
}

.input-wrapper {
  border: 1px solid #ced4da;
  border-radius: 2px;
  overflow-y: hidden;
  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
}

.input-wrapper--large {
  height: 200px;
}

<div class="progress-wrapper">
  <div class="progress-step">
    <div class="progress-step__marker"></div>
    <div class="input-wrapper">
      <div class="input-wrapper__input">I have my first input here</div>
    </div>
  </div>
  <div class="progress-step">
    <div class="progress-step__marker"></div>
    <div class="input-wrapper input-wrapper--large">
      <div class="input-wrapper__input">I have my second input here</div>
    </div>
  </div>
  <div class="progress-step progress-step--no-step">
    <div class="progress-step__marker"></div>
    <div class="input-wrapper">
      <div class="input-wrapper__input">I have my third input here</div>
    </div>
  </div>
</div>

---

Related Topics