Как реализовать что-то типа оглавления с точками между текстом в две колонки?

Question

[Леонид]

Как реализовать такой вот вид:



Как реализовать такие вот точки от одного элемента к другому?
Я сделал две колонки, в первой текст, например в span и там в :after как-то эти точки установить - но что-то не получается.

Comments

[Ankhena]

Такой же вопрос https://qna.habr.com/q/1199564

[Леонид]

обратите внимание на то что я пишу про две колонки - у меня немного не такой случай:

Answer 1

[Dino Winchester]

Можно сделать примерно так:

Answer 2

[Danny Arty]

Способов много.

Comments

[Леонид]

у меня не совсем описанный вами случай, у меня две колонки получается изначально + обратите внимание на выравнивание текста в правой колонке - по левому краю:

[Danny Arty]

Леонид, поменял код. Я к тому, что вариантов реализации куча, главное чтобы вы поняли из чего исходить и как адаптировать под свою задачу

Answer 3

[Леонид]

еще раз оставлю здесь решение в рамках моей задачи - нужно было заверстать блок атрибутов товаров для WooCommerce вот в таком виде:



создал файлик /wp-content/themes/моя_тема/woocommerce/single-product/product-attributes.php со следующим содержимым:

<div class="woocommerce-product-attributes shop_attributes">
	<?php foreach ( $product_attributes as $product_attribute_key => $product_attribute ) : ?>
		<div class="woocommerce-product-attributes-item woocommerce-product-attributes-item--<?php echo esc_attr( $product_attribute_key ); ?>">
			<span class="woocommerce-product-attributes-item__label">
                <span class="label-text"><?php echo wp_kses_post( $product_attribute['label'] ); ?></span>
                <span class="line"></span>
            </span>
			<span class="woocommerce-product-attributes-item__value"><?php echo wp_kses_post( $product_attribute['value'] ); ?></span>
        </div>
	<?php endforeach; ?>
</div>

прописал CSS-код:

div.woocommerce-product-attributes.shop_attributes {
	width: 100%;
}
div.woocommerce-product-attributes.shop_attributes div.woocommerce-product-attributes-item {
	display: flex;
	width: 100%;
}
div.woocommerce-product-attributes.shop_attributes div.woocommerce-product-attributes-item span.woocommerce-product-attributes-item__label {
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	color: #333333;
	width: 70%;
	opacity: 0.5;
	display: flex;
  	justify-content: space-between;
}
div.woocommerce-product-attributes.shop_attributes div.woocommerce-product-attributes-item span.woocommerce-product-attributes-item__label span.line {
	display: inline-flex;
	flex-grow: 1;
  	border-bottom: 1px dotted #ccc;
	height: 15px;
	margin-left: 10px;
	margin-right: 10px;
}
div.woocommerce-product-attributes.shop_attributes div.woocommerce-product-attributes-item span.woocommerce-product-attributes-item__value {
	width: 30%;
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	color: #333333;
}

теперь всё выглядит именно так как надо: