Skip to content

Instantly share code, notes, and snippets.

Created January 31, 2013 11:26
What would you like to do?
A CSS TODO class for marking TODOs in WIP files. To use it, include the css in the header and create a div.todo containing the text message describing what you need to do. The CSS will prepend the word "TODO" and highlight the element to make it easy to find on the page, it also highlights the next element, assuming that whatever is after the TO…
/* 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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment