Troubleshooting responsive layout with :after

So I'm working on a new design for my site and using the super-great stylus CSS preprocessor along with this great gist for simple responsive layout (again with stylus and the nib library).

Well, I wanted to see which of my CSS3 media queries were in effect. Here's a simple way to do it with the :before selector.

First, put some markup in your HTML near the top, like this (using jade template language.

body
  .content
    header
      p BUGBUG responsive layout max-width:
      h1
        a(href="/") Peter Lyons

Then in your .styl stylesheet, use :after to tell which media query is active.

////////// Responsive layout //////////
@media screen and (max-width: 960px)
  header
    p
      &:after
        content "960"

@media screen and (max-width: 720px)
  header
    p
      &:after
        content "720"

Now load that in your browser and resize the window. The CSS will change the text in the header telling you exactly which rules are firing. Nice!