CSS GRID избегать :: до и :: после в сетке

Question

Когда я работаю с CSS Grid, некоторые из них, как и Grid, принимают до и после в качестве опорных элементов.Есть ли способ поработать над этим?

.wrapper {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
}

.wrapper::before {
  content: "::before element";
}

.wrapper::after {
  content: "::after element";
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
</div>

Answer 1

Вы можете изменить их порядок, чтобы они всегда были в конце, а также добавить некоторые свойства, чтобы скрыть их.Например, вы уверены, что они вас не побеспокоят.

.wrapper {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
}

.wrapper::before {
  content: "::before element";
  order:9999;
  visibility:hidden;
  display:none;
  height:0;
  overflow:hidden;
}

.wrapper::after {
  content: "::after element";
  order:9999;
  visibility:hidden;
  display:none;
  height:0;
  overflow:hidden;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
</div>

Answer 2

попробуйте

.wrapper::after, .wrapper::before{ display:none !important;}