I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my other blogs

Massive Head Canon: Intelligent discussion of movies, books, games, and technology.

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

What The Heck Is A Replaced Element?

html / elements

Estimated reading time: 2 minutes

This article is also available in French.

There’s not a lot of information about replaced HTML elements to be found online. Neither is the topic addressed in any web development book that I’m aware of. That’s is unfortunate… because, from my experience, knowing the limitations of replaced elements would have saved me a lot of stress when I started experimenting with advanced CSS.

Essentially, replaced elements are HTML elements that have a predetermined width and height, without benefit of CSS. Another way of thinking of replaced elements is “any tag that has its content replaced by an outside source”. <img> and <video> are obvious examples, but many form elements, such as <input>, are also replaced. For example, when you insert the following code on a page:

<input type=“text”>

… the input just shows up, at a size that is suitable for single-line text-input. That doesn’t mean you shouldn’t add extra attributes and values to the element, or that you can’t apply CSS to it, just that the browser replaces that tag with an object of a predetermined size by default. The same happens with <img>:

<img src=“bison.jpg” alt=“Plains bison”>

Without any extra information, bison.jpg will be loaded onto the page and the img tag replaced with whatever content bison.jpg contains, at the picture’s natural width and height.

<br>, <hr> and <object> are all replaced elements, as are <input>, <button>, and <textrarea>. In HTML5, <video> and <iframe> are replaced elements, as are <audio> and <canvas> under some circumstances.

If you can still use CSS to alter the appearance of these elements, how does the fact that they are “replaced” make any difference? Because of one vital rule:

You cannot apply generated content to replaced elements. That is, you cannot apply the pseudo-element selectors :before or :after to them.

Think about it. Wouldn’t it be great to be able to auto-generate captions for images in CSS? You have the information right there, in the image’s alt and title! All you’d need to do is this:

img:after { content: attr(alt); }

That would be perfect! You could just display the title value of the image directly on the page, and not have to worry about <figcaption> or definition lists for images at all. But it can’t be done. The <img> tag is already replaced content: you can’t generate more content on top of that with CSS.

Bottom line: if you can’t get a result from directly applying :before or :after to a tag, it’s a replaced element. But there is still a way, as we’ll see in the next article. 

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.