.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)删除边界来实现这一点。但是在使用伪元素尝试执行相同操作时遇到了麻烦
.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;
}
}
}
}
答案 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>