pseudo-element acting like a grid item in CSS grid

by

Pseudo-elements are considered child elements in a grid container (just like in a flex container). Therefore, they take on the characteristics of grid items.

You can always remove grid items from the document flow with absolute positioning. Then use CSS offset properties (left, right, top, bottom) to move them around.

Here’s a basic example:

html {
  width: 75%;
}

ul {
  list-style: none;
}

input {
  width: 100%
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

li {
  position: relative;
}

li.required::after {
  content: '*';
  font-size: 15px;
  color: red;
  position: absolute;
  right: -15px;
  top: -15px;
}
<ul>
  <li class="required">
    <input type="text">
  </li>
  <li class="grid required">
    <p>one</p>
    <p>two</p>
    <p>three</p>
  </li>
  <li class="required">
    <input type="text">
  </li>
</ul>

More Related Contents:

  1. CSS-only masonry layout
  2. Can I use a :before or :after pseudo-element on an input field?
  3. Font Awesome 5 on pseudo elements shows square instead of icon
  4. Make grid container fill columns not rows
  5. Grid properties not working on elements inside grid container
  6. Html/Css Triangle with pseudo elements
  7. :after and :before CSS pseudo elements hack for Internet Explorer 7
  8. CSS content property: is it possible to insert HTML instead of Text?
  9. minmax() defaulting to max
  10. Preventing double borders in CSS Grid
  11. Elongated hexagon shaped button using only one element
  12. Why is my Grid element’s height not being calculated correctly?
  13. Why display grid with 100% in grid-template-columns goes out of body?
  14. Make row stretch across all columns in CSS Grid
  15. Why does a filter gradient on a pseudo element not work in IE8?
  16. CSS only solution to set MULTIPLE “same height” row sections on a responsive grid
  17. How can I use the CSS pseudo-element :before{ content: ” } to affect an element?
  18. Understanding grid negative values
  19. Which elements support the ::before and ::after pseudo-elements?
  20. grid-auto-flow in snake lines?
  21. How can I target a specific column or row in a CSS grid layout?
  22. How to make CSS Grid items take up remaining space?
  23. sticky position on css grid items
  24. How do browsers calculate width when child depends on parent, and parent’s depends on child’s
  25. What are the default values for justify-content & align content?
  26. Using attr(data-icon) property to display unicode before element
  27. after pseudo element not appearing in code
  28. CSS Grid with variable number of “auto” rows, but one row should take “1fr”
  29. Adding text before list
  30. CSS Grid Row Height Safari Bug

Leave a Comment