本文介绍了在圆圈css之间画线的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试在圆之间画线，我有此代码 https://codepen.io/cfmorales/pen/qBEqGpr ，以某种方式起作用，但是当您调整页面大小时，线条的高度与圆圈不匹配，关于如何使它响应的任何想法?所有的魔力都在:before
I'm trying to draw lines between circles, i have this code https://codepen.io/cfmorales/pen/qBEqGpr, in some way it works but when you resize the page the height of the line doesnt match to the circle, any ideas of how can i make it responsive? all the magic is in the :before
td:nth-child(2) {
vertical-align: baseline;
}
td:nth-child(1) {
display: flex;
justify-content: center;
margin-right: 28px;
width: 42px;
height: 42px;
border: 1px solid #999999;
border-radius: 100%;
text-align: center;
margin-bottom: 31%;
position: relative;
}
tr > td:first-child:before {
content: '';
position: absolute;
background: #BFBFBF;
height: 26px;
width: 1px;
top: 100%;
left: 50%;
transform: translateX(-50%);
}
tr:last-child > td:first-child:before {
display: none;
}
span {
vertical-align: middle;
color: #999999;
font-family: "Playfair Display";
font-size: 24px;
line-height: 32px;
text-align: center;
}<table class="table_1">
<tbody>
<tr>
<td><span>1</span></td>
<td><span>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal m</span></td>
</tr>
<tr>
<td><span>2</span></td>
<td><span>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal mLorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal m</span></td>
</tr>
<tr>
<td><span>3</span></td>
<td><span>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal m</span></td>
</tr>
<tr>
<td><span>4</span></td>
<td><span>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal m</span></td>
</tr>
<tr>
<td><span>5</span></td>
<td><span>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal m</span></td>
</tr>
</tbody>
</table>
<p></p>推荐答案
我将表替换为divs.
I replaced your table with divs.
我在这里做了一些CSS魔术.
I did some CSS magic here.
-
这条线只是左边框.
The line is just a border-left.
圆圈是::在伪元素之前.
The circle is a ::before pseudo-element.
每个:: before元素中都有一个计数器.
Each ::before element has a counter in it.
我还使用了CSS变量，因此更容易更新几个元素.
I also used CSS variables so it's easier to update several elements.
我猜想您不希望最后一个元素有一行，所以我使用了:not(:last-child)来阻止这种情况的发生.
I guessed that you didn't want the last element to have a line, so I used :not(:last-child) to stop that from happening.
:root {
--circle-size: 42px;
--spacing: 28px;
--text-color: #999;
}
.container {
counter-reset: section;
padding-top: var(--spacing);
padding-left: var(--spacing);
}
.container > div {
position: relative;
padding: calc(2 * var(--spacing));
padding-top: 0px;
color: var(--text-color);
font-family: "Playfair Display";
font-size: 24px;
line-height: 32px;
}
.container > div:not(:last-child) {
border-left: 1px solid;
}
.container > div::before {
counter-increment: section;
content: counter(section);
position: absolute;
left: 0px;
top: -4px;
transform: translateX(-50%);
width: var(--circle-size);
height: var(--circle-size);
display: flex;
justify-content: center;
align-items: center;
border: 1px solid var(--text-color);
border-radius: 50%;
background-color: white;
}<div class="container">
<div>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal m</div>
<div>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal mLorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal m</div>
<div>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal m</div>
<div>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal m</div>
<div>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal m</div>
</div>这篇关于在圆圈css之间画线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！