1

When I am working with CSS Grid some how grid also take before and after as gird elements. Is there any way to work about this?

.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>
Salman A
  • 262,204
  • 82
  • 430
  • 521
Elroy Fernandes
  • 303
  • 1
  • 3
  • 13
  • 1
    `display:none` ? – Temani Afif Oct 04 '18 at 12:48
  • 7
    Why are the ::before and ::after there in the first place? What purpose do they fulfill? Knowing this would make it easier to help you solve the problem. – Jos van Weesel Oct 04 '18 at 12:54
  • 3
    It is dynamically created by woocommerce. – Elroy Fernandes Oct 04 '18 at 12:57
  • 3
    What do you want to happen? If you meant to use them as headers or footers, i.e. spanning the entire width of the grid, use `grid-column: 1 / -1` on them. – Mr Lister Oct 04 '18 at 12:58
  • just remove your content from after and before then these boxes are gone? not sure what else you're asking for? – Synoon Oct 04 '18 at 13:37
  • Does this answer your question? [pseudo-element acting like a grid item in CSS grid](https://stackoverflow.com/questions/45599317/pseudo-element-acting-like-a-grid-item-in-css-grid) – djvg May 03 '23 at 20:42

2 Answers2

5

try This 

.wrapper::after, .wrapper::before{ display:none !important;}
Hariom Singh
  • 1,420
  • 1
  • 8
  • 21
0

You can change their order to make them always at the end and add some properties to also hide them. Like that you are sure they will not bother you.

.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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415