html - 媒体查询边框长度

Question

下面是我正在使用的代码，但是当对 iPAD 使用媒体查询时，右边框非常接近第二个 Div ，我希望所有使用媒体查询的设备的边框都正确对齐，也适用于所有浏览器？

HTML:

<div class="row">
<div class="medium-6 large-6 columns right-border">
<h4>ABC TEST</h4>

<p>I love coding</p>
<p><strong>Code</strong></p>

</div>
<div class="medium-6 large-6 columns">
<h4>ABC TEST</h4>

<p>Love coding</p>
  <p>live life</p>
</div>
</div>

CSS:

div.right-border:before {
  content: "";
  border-right:1px solid #bcb4b4;
  width:60%;
  position:absolute;
  top: 7%;
  left: 90px;
  height: 80%;
}

@media only screen and (min-width: 320px) and (max-width: 760px) { 
div.right-border:before { 
border-right:none;
border-bottom:1px solid #ca6e6e; 
left:1%;
width:260px;
bottom:90%;
height:90%;
}
 }

Answer 1

您应该在上面的代码中使用的媒体查询中使用相同的选择器:div.right-border:before(而不是after)