CSS for TODO Elements

I wrote a small CSS class .todo for cases when you want to mark HTML elements on a page that you still want to work on later. Add this class to elements that aren’t ready yet, to mark them so that you won’t forget about them and ship the site unfinished. See the Gist’s description on GitHub for more information on how to use it. Here’s the code:

/* CSS for adding TODO notes on WIP pages */
div.todo { /* style the text in a bright box */
  color: red;
  font-size: large;
    background-color: yellow;
    text-align: center;
    border: 3px solid red;
    border-bottom: 1px solid red;
    margin-bottom: 0;
    padding: 1px;
}
div.todo:before { /* prepend the word TODO to the text */
    font-weight: bold;
    content: "↓ TODO: "
}
div.todo+* { /* style the following element in a bright box too */
    border: 3px solid red;
    border-top: 0;
    margin-top: 0;
}