Как достичь этой горизонтальной линии от css или bootstrap

Question

Я работаю над проектом, который включает html, css и bootstrap для проектирования передней части.

Есть ли способ получить этот вид либо из самого загрузочного устройства, либо с помощью основного css? может кто-то предоставить мне код, как получить эту строку

Answer 1

Вот CSS единственное решение с использованием pseudo элемента. Это решение будет регулировать ширину страницы при изменении размера.

ul, 
 
li { 
 
    list-style: none; 
 
} 
 
li { 
 
    float: left; 
 
    position: relative; 
 
    height: 2px; 
 
    width: 30%; 
 
    background-color: cornflowerblue; 
 
} 
 
li:before { 
 
    content: ''; 
 
    position: absolute; 
 
    height: 10px; 
 
    width: 10px; 
 
    border-radius: 50%; 
 
    top: 1px; 
 
    transform: translateY(-50%); 
 
    background-color: cornflowerblue; 
 
} 
 
li:last-child { 
 
    width: 0px; 
 
}

<ul> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
</ul>

Answer 2

Мда это может быть сделано в 100 способов, и это, вероятно, не самый чистый один, но он работает :) Im создавая div.line с 3 div.bullets где у последней пули есть a до AND и после ее назначения.

JSFIDDLE