Как лучше всего создать линию с: после, но с кружком в конце?

Question

Итак, как я могу создать эти строки после этих элементов (Tomatos ... et c), но мне также нужен круг в конце каждой строки?

Я пробовал таким образом, но без круга, потому что я не могу найти какой-либо способ!:

.h1:after{
content: "";
position: absolute;
height: 0.5em;
width: 95px;
margin-top: 13px;
border-top: 2px solid black;
margin-left: 20px;}

Answer 1

Вы можете получить круг, установив стиль рамки с помощью элемента :: before. Вы определяете размер круга, устанавливая высоту границы (здесь 10 пикселей) и делаете его полностью круглым, устанавливая радиус до 50%. Вы можете расположить его, используя свойства top / left.

.h1::before {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 10px solid black;
    left: 293px;
    top: 24px;
}