If you want to create a visually appealing dotted timeline between icon boxes in Elementor, you can achieve this using a simple CSS solution.

Step-by-Step Guide

I created 4 icon boxes placed one after another with zero space between them. Each box contains an icon on the left side and a title with text on the right side, similar to the design shown in the given image.

To add a green dotted line connecting the icons, I used the ::before pseudo-element in CSS with the following code:

greenline::before 
{
content: "";
position: absolute;
top: 0;
left: 24px; 
width: 2px; 
height: 100%; 
background-image: linear-gradient(to bottom, #4CA377 50%, transparent 50%); 
background-size: 2px 10px; 
}

Why This Approach Works

• Fully Responsive: The dotted line adapts well to different screen sizes.
• Flexible Spacing: You can add space between icon boxes by applying padding-bottom to the icon box, and it will not affect the line.

How to Apply the CSS

1. Add the class greenline to your icon boxes.
2. Insert the provided CSS code in the Custom CSS section of your Elementor page or open Customize of the theme and the code in Additional CSS.
3. Adjust the left value to align the line perfectly with your icons.

By following this method, you can create a professional-looking dotted timeline effect between your Elementor icon boxes with ease.

Need further Elementor tips? Stay tuned for more tutorials!