时间戳

首页 > 解决方案 > 如何在 flex 容器中居中 ::after 伪内容？

html - 如何在 flex 容器中居中 ::after 伪内容？

问题描述

在代码段中，您将看到::after带有边框设置的伪。我正在尝试在每个类的右侧添加一个边框，.details并将该边框放在每列的中间，如下所示： 在此处输入图像描述

.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>

标签： htmlcss

解决方案

试试这个造型

.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%;
    }
}

推荐阅读