仅将CSS伪元素添加到网格中心

时间:2019-03-22 19:50:58

标签: css

.parnet{
  max-width: 600px;
  margin: 0 auto;
  background: #f4f4f5;
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.cell {
  position: relative;
}

.inner {
  width: 80px;
  height: 80px;
  padding: 40px;
  text-align: left;
}

.wrapper .cell:nth-child(2n):before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 60%;
  width: 1px;
  background-color:red;
}
<div class="parnet">
  <div class="wrapper">
    <div class="cell">
      <div class="inner">1</div>
    </div>
    <div class="cell">
      <div class="inner">2</div>
    </div>
    <div class="cell">
      <div class="inner">3</div>
    </div>
    <div class="cell">
      <div class="inner">4</div>
    </div>
    <div class="cell">
      <div class="inner">5</div>
    </div>
    <div class="cell">
      <div class="inner">6</div>
    </div>
  </div>
</div>

我有一个网格,我试图在伪元素之前添加一个:before来在每个网格单元之间创建分隔线。我只希望分隔线显示在中心单元格中,而不显示在外部左侧和右侧。 我能够使用border-right然后使用nth-child(3n)删除边界来实现这一点。但是在使用伪元素尝试执行相同操作时遇到了麻烦

enter image description here

.parent {
      background: white;
      max-width: 600px;
      margin: 0 auto;

      .wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);

        .cell {
          position: relative;

          &:before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            height: 60%;
            width: 1px;
            background-color:red;
          }

          &:nth-child(3n):before {
            width: 0;
          }
         .inner {
           max-width: 320px;
           width: 320px;
           height: 200px;
           padding: 57px 43px 40px;
           text-align: left;
         }
        }
      }
    }

2 个答案:

答案 0 :(得分:1)

.parnet{
  max-width: 600px;
  margin: 0 auto;
  background: #f4f4f5;
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.cell {
  position: relative;
}

.inner {
  width: 80px;
  height: 80px;
  padding: 40px;
  text-align: left;
}

.wrapper .cell:before{
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 60%;
  width: 1px;
  background-color:red;
}

.wrapper .cell:nth-child(3n):before {
  width: 0;
}
<div class="parnet">
  <div class="wrapper">
    <div class="cell">
      <div class="inner">1</div>
    </div>
    <div class="cell">
      <div class="inner">2</div>
    </div>
    <div class="cell">
      <div class="inner">3</div>
    </div>
    <div class="cell">
      <div class="inner">4</div>
    </div>
    <div class="cell">
      <div class="inner">5</div>
    </div>
    <div class="cell">
      <div class="inner">6</div>
    </div>
  </div>
</div>

所以提示是在单元格上设置 right:0; 而不是left:0; 然后使用

.wrapper .cell:nth-child(3n):before {
  width: 0;
}

感谢基思(Keith),我会为您提供给我很好的线索,为您评分。

答案 1 :(得分:0)

这是我的答案。我在水平线上使用.cell:nth-child(3n):before。我希望这就是您所需要的。

.parent {
  background: white;
  max-width: 600px;
  margin: 0 auto;
  font-size:2em;
}
.parent .wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.parent .wrapper .cell {
  position: relative;
}
.parent .wrapper .cell:before {
  content: "";
  position: absolute;
  right: 50%;
  top:.2em;
  height: 60%;
  width: 1px;
  background-color: red;
}
.parent .wrapper .cell:nth-child(3n):before {
  width: 300%;
  height:1px;
  top:100%
}
<div class="parent">
  <div class="wrapper">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>
  <div class="cell">7</div>
  <div class="cell">8</div>
  <div class="cell">9</div>
</div> 
</div>