在圆圈css之间画线 [英] Draw lines between circles 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之间画线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！