How to center ::after pseudo content in a flex container?

Question

In the snippet, you'll see ::after pseudo with a border setting. I'm trying to add a border to the right of each class .details and place that border in the middle of each column to look like this:

.header-profile__sub {
  display: flex;
  flex-wrap: wrap;
}

.header-profile__sub .details {
  display: flex(column);
  width: 100%;
}

.header-profile__sub .details p {
  margin: 0.2rem 0;
  line-height: 1.5;
  color: #000a70;
}

.header-profile__sub .details p span:first-of-type::after {
  content: ':';
}

@media (min-width: 768px) {
  .header-profile__sub .details {
    width: 33%;
    flex-grow: 1;
    background: white;
  }
  
  .header-profile__sub .details:not(:last-of-type) {
    border-right: 5px solid green;
    content: "";
  }  
}

<div class="header-profile__sub">
  <div class="details">
    <p>
      <span><a href="#">Company Name</a></span>
    </p>
    <p>
      <span>Plan</span>
      <span> Professional</span>
    </p>
  </div>
  <div class="details">
    <p>
      <span>Users</span>
      <span>23</span>
    </p>
    <p>
      <span>Founded</span>
      <span>2017</span>
    </p>
  </div>
  <div class="details">
    <p>
      <span>Favorite Features</span>
      <span>Call Recording, Call Groups, App, Auto-Attendant</span>
    </p>
  </div>
</div>

@Paulie_D - The question you suggested doesn't have much to do with the alignment I'm looking for. — Millhorn, Jun 14 '21 at 20:31
Yes it does. What it says is that you cannot center an item by ignoring the other content without using `position:absolute` or adding additional elements. That is essentially the solution. — Paulie_D, Jun 14 '21 at 20:35
@Paulie_D - Look at the comment I made to the person who answered with the `position: absolute` solution... not working... I ended up doing it without `position: absolute` as suggested by the other answer. Using `position: absolute` called for too many custom `right` measurements. — Millhorn, Jun 14 '21 at 21:13
@Paulie_D and the configuration here is completely different from the other question. it's not about centering one element and another to the right/left. it's about centring one element between two others without ignoring them. None of the solution there can be applied here. — Temani Afif, Jun 14 '21 at 21:21

score 1 · Answer 1 · answered Jun 14 '21 at 19:20

Try with this styling

.header-profile__sub {
    display: flex;
    flex-wrap: wrap;
}

.header-profile__sub .details {
    display: flex(column);
    width: 100%;
}

.header-profile__sub .details p {
    margin: 0.2rem 0;
    line-height: 1.5;
    color: #000a70;
}

.header-profile__sub .details p span:first-of-type::after {
    content: ':';
}

@media (min-width: 768px) {
    .header-profile__sub .details {
        width: 33%;
        flex-grow: 1;
        background: white;
    }

    .details {
        position: relative;
    }

    .header-profile__sub .details:not(:last-of-type):after {
        content: "";
        border-right: 3px solid green;
        position: absolute;
        height: 100%;
        top: 0;
        right: 38%;
    }
}

When it scales down, the border doesn't remain in the center of the elements. Here's a codepen to illustrate: [Codepen](https://codepen.io/r3hab/pen/WNpLNzY) — Millhorn, Jun 14 '21 at 19:37

score 1 · Accepted Answer · answered Jun 14 '21 at 19:46

I would consider two psuedo element on the main container so they can easily be placed as flex item and margin:auto will do the trick. You have to also adjust the order to keep them between the elements:

.header-profile__sub {
  display: flex;
  flex-wrap: wrap;
}

.header-profile__sub .details {
  width: 100%;
}

.header-profile__sub .details p {
  margin: 0.2rem 0;
  line-height: 1.5;
  color: #000a70;
}

.header-profile__sub .details p span:first-of-type::after {
  content: ':';
}

@media (min-width: 768px) {
  .header-profile__sub .details {
     width:auto;
     max-width:33%;
  }
  .header-profile__sub .details:first-child {
      order:-1;
  }
  .header-profile__sub .details:last-child {
      order:1;
  }
  .header-profile__sub::before,
  .header-profile__sub::after{
    content:"";
    width:5px;
    background:green;
    margin:0 auto;
  }
}

<div class="header-profile__sub">
  <div class="details">
    <p>
      <span><a href="#">Company Name</a></span>
    </p>
    <p>
      <span>Plan</span>
      <span> Professional</span>
    </p>
  </div>
  <div class="details">
    <p>
      <span>Users</span>
      <span>23</span>
    </p>
    <p>
      <span>Founded</span>
      <span>2017</span>
    </p>
  </div>
  <div class="details">
    <p>
      <span>Favorite Features</span>
      <span>Call Recording, Call Groups, App, Auto-Attendant</span>
    </p>
  </div>
</div>

How to center ::after pseudo content in a flex container?

2 Answers2