When CSS3 was released, the ability to place text or images after or before HTML items dynamically with CSS was a major new advantage. For instance:
That code will place the word ‘text’ before a div. That level of simplicity is useful if you need to dynamically add text to a header or menu item. However, it is generally better to add the text directly into your HTML or other code.
A more useful way to use :after or :before is using it in conjunction with position: absolute. This can be useful for flair items connected to images, paragraphs or anything else. For example:
Images are sort of a special beast in the HTML animal kingdom. They’re technically inline elements, but they don’t really behave like them. This can cause trouble in responsive web designs. Happily, the fix is simple, safe, and effective.
You’ve just found the perfect cat video to share with all your friends. You post it to your fancy responsive website, but whoops: the video doesn’t fit! Let’s fix that.
One design technique I’ve always enjoyed is highlighting the row and column of any cell that the user hovers over. Highlighting table rows is easy, but columns are hard. Or so I thought. Using table cols vastly simplifies the process.
CSS Preprocessors have been around for a while now, but I didn’t start seriously looking into them until about a year ago. I didn’t think yet another language like LESS, Stylus or Sass would have anything to offer me. I was wrong, and CSS Preprocessors are awesome. Here are three good reasons why.
If you’ve been here before, you’ll probably notice things are looking quite a bit differently all of a sudden (and if you’re new to these parts, welcome!). For the first time in several years, CSS Newbie has a new face!