Articles Tagged
pseudo elements
Drawing Images with CSS Gradients
What I mean by “CSS images” is images that are created using only HTML elements and CSS. They look as if they were SVGs drawn in Adobe Illustrator but they were made right in the browser. Some techniques I’ve seen …

Meet the New Dialog Element
Keith Grant discusses how HTML 5.2 has introduced a peculiar new element: <dialog>
. This is an absolutely positioned and horizontally centered modal that appears on top of other content on a page. Keith looks at how to style this …

Animating the `content` Property
Did you know that you can animate the content
property of pseudo elements? According the list of animatable properties in the spec, you shouldn’t be able to, but in the latest version of desktop Chrome you can. The demo below …

Centering in the Unknown
When it comes to centering things in web design, the more information you have about the element being centered and its parent element, the easier it is. So what if you don’t know anything? It’s still kinda doable.…
Signify “PDF Bombs”
Any ol’ anchor link can be a link to a PDF document, but clicking a link like that thinking otherwise can be surprising and uncomfortable for a user. This CSS can visually signify those links.
/* Add " (PDF)" text
… The Clearfix: Force an Element To Self-Clear its Children
This will do you fine these days (IE 8 and up):
.group:after {
content: "";
display: table;
clear: both;
}
Apply it to any parent element in which you need to clear the floats. For example:
<div class="group">
<div class="is-floated"></div>
…