Как добавить строку как псевдоэлемент при использовании flex-box

Я хотел бы добавить вертикальную линию между каждым кругом, однако при использовании псевдоэлемента: before это не показывает границу. Когда я удаляю родительский элемент гибкого блока, появляются линии.

Как я могу добиться этого, не удаляя flexbox, поскольку мне нужно, чтобы текст соответствовал пронумерованным кружкам.

https://jsfiddle.net/p3gt02yb/1/

.circle {
  position: relative;
  border: 2px solid #999;
  border-radius: 100%;
  width: 50px;
  line-height: 50px;
  text-align: center;
  margin-top: 50px;
  background-color: #fff;
  z-index: 2;
}

.circle:first-child {
  margin-top: 0;
}

.circle:before {
  position: absolute;
  border: 1px solid #999;
  width: 0;
  height: 50px;
  display: block;
  content: '';
  left: 50%;
  z-index: 1;
  top: -54px;
  margin-left: -1px;
}

.circle:first-child:before {
  display: none;
}

.flex {
  display: flex;
  align-items: center;
}

.text-padding {
  padding: 0 15px;
}

<section>
  <div class = "flex">
    <div class = "circle">1</div>
    <strong class = "text-padding">Lorem Ipsum Dollar</strong>
  </div>
  <div class = "flex">
    <div class = "circle">2</div>
    <strong class = "text-padding">Lorem Ipsum Dollar</strong>
  </div>
  <div class = "flex">
    <div class = "circle">3</div>
    <strong class = "text-padding">Lorem Ipsum Dollar</strong>
  </div>
  <div class = "flex">
    <div class = "circle">4</div>
    <strong class = "text-padding">Lorem Ipsum Dollar</strong>
  </div>
  <div class = "flex">
    <div class = "circle">5</div>
    <strong class = "text-padding">Lorem Ipsum Dollar</strong>
  </div>
</section>

vertical line ты имеешь ввиду горизонтальный?

— 21.06.2018 00:02

html css flexbox pseudo-element

20.06.2018 23:58

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

1 568

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Не уверен, что вы имеете в виду: горизонтальный или вертикальный.

Для горизонтальной линии между ними вы можете добавить flex-wrap: wrap; и использовать псевдоэлемент следующим образом:

.flex {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.flex::after {
    content: '';
    display: block;
    width: 100%;
    border-bottom: 1px solid black;
    margin: 4px 0;
}

Взгляните на эту скрипку, чтобы увидеть ее в действии: https://jsfiddle.net/15dpa2ux/

Для вертикальной линии удалите стили .circle:first-child, .circle:before и .circle:first-child:before, затем вы должны стилизовать элементы следующим образом:

.circle:after {
  content: '';
  border: 1px solid #999;
  position: absolute;
  right: -15px;
  top: 0;
  bottom: 0;
}

Взгляните на эту скрипку, чтобы увидеть ее в действии: https://jsfiddle.net/p3gt02yb/23/

спасибо, я имел в виду вертикальную линию, однако (сверху вниз) извините, я должен был привести пример для пояснения

— 21.06.2018 00:27

Затем вы можете использовать вторую скрипку :) она использует меньше определений css. :) @ImranR

— 21.06.2018 00:41

21.06.2018 00:04

Ответ принят как подходящий

Проблема заключается в следующем правиле CSS:

.circle:first-child:before {
    display: none;
}

Это скрывает все ваши элементы :before, потому что .circle всегда является первым дочерним элементом div.flex. Вам нужно найти первый элемент .flex и скрыть элемент :before на .circle в этом элементе.

Я предполагаю, что вы пытаетесь создать цепочку из кругов с вертикальной линией. Итак, вы можете попробовать следующее решение.

.circle {
  background: #fff;
  border: 2px solid #999;
  border-radius: 100%;
  line-height: 50px;
  margin-top: 50px;
  position: relative;
  text-align: center;
  width: 50px;
}
.circle:first-child {
  margin-top: 0;
}
.circle::before {
  border: 1px solid #999;
  content: '';
  display: block;
  height: 20px;
  left: 50%;
  position: absolute;
  top:-22px; /** (margin between circle (20px * -1)) - (border-width (2px * -1)) = -22px */  
}
.flex {
  align-items: center;
  display: flex;
  margin-bottom: 20px; /** vertical-space between the circles. */
}
.text-padding {
  padding: 0 15px;
}
.flex:first-child .circle::before {
  display:none;
}

<section>
  <div class = "flex">
    <div class = "circle">1</div>
    <strong class = "text-padding">Lorem Ipsum Dollar</strong>
  </div>
  <div class = "flex">
    <div class = "circle">2</div>
    <strong class = "text-padding">Lorem Ipsum Dollar</strong>
  </div>
  <div class = "flex">
    <div class = "circle">3</div>
    <strong class = "text-padding">Lorem Ipsum Dollar</strong>
  </div>
  <div class = "flex">
    <div class = "circle">4</div>
    <strong class = "text-padding">Lorem Ipsum Dollar</strong>
  </div>
  <div class = "flex">
    <div class = "circle">5</div>
    <strong class = "text-padding">Lorem Ipsum Dollar</strong>
  </div>
</section>

21.06.2018 00:05

Из-за этого вы не можете видеть линии:

.circle:first-child:before {
 display: none;
}

Каждый круг является первым дочерним элементом родительского файла .flex.

.circle {
  position: relative;
  border: 2px solid #999;
  border-radius: 100%;
  width: 50px;
  line-height: 50px;
  text-align: center;
  margin-top: 50px;
  background-color: #fff;
  z-index: 2;
}

.circle:first-child {
  margin-top: 0;
}

.circle:before {
  position: absolute;
  border: 1px solid #999;
  width: 0;
  height: 50px;
  display: block;
  content: '';
  left: 50%;
  z-index: 1;
  top: -54px;
  margin-left: -1px;
}



.flex {
  display: flex;
  align-items: center;
}

.text-padding {
  padding: 0 15px;
}

<section>
  <div class = "flex">
    <div class = "circle">1</div>
    <strong class = "text-padding">Lorem Ipsum Dollar</strong>
  </div>
  <div class = "flex">
    <div class = "circle">2</div>
    <strong class = "text-padding">Lorem Ipsum Dollar</strong>
  </div>
  <div class = "flex">
    <div class = "circle">3</div>
    <strong class = "text-padding">Lorem Ipsum Dollar</strong>
  </div>
  <div class = "flex">
    <div class = "circle">4</div>
    <strong class = "text-padding">Lorem Ipsum Dollar</strong>
  </div>
  <div class = "flex">
    <div class = "circle">5</div>
    <strong class = "text-padding">Lorem Ipsum Dollar</strong>
  </div>
</section>

Это говорит то же самое, что и ответ, полученный 11 минутами ранее.

— 21.06.2018 00:22

@TylerH Да, Себастьян был очень быстр. Следует ли мне удалить свой ответ?

— 21.06.2018 00:27

Это не совсем то, что вред оставляет его; в будущем некоторые люди могут увидеть это и проголосовать против, что приведет к потере репутации ... Вам решать, удалять ли это.

— 21.06.2018 00:38

21.06.2018 00:16