Discussion on: 3 Popular Website Heroes Created With CSS Grid Layout

[John Peters]

Voted best Dev article 2020 Category:Grid!

I leaned a little trick a while back...

&::after {
  content: "componentName:css 1234";
  grid-area: hero;
  width: 30vmin;
  height: 60vmin;
  transform: translate(20%, 40%) rotate(45deg);
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='#{svgColor($support)}' fill-opacity='0.6' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}

As long as this is not used in a contextual way.. the string is shown in the rendered CSS and tells you where it came from!

[Stephanie Eckles]

Haha, thanks!

I think I recall seeing that tip, however be aware pseudo content can be read by assistive tech and there's no way to conceal it from them if that info is attached to a focusable/discoverable element, in which case that would give them some kind of crazy info with no context!