Animate width from zero to auto (kinda)

What if 100% meant auto?

  Hover the text here to reveal it

reveal {
  display: table-cell;
  & > div {
    overflow: hidden; width: 0%;
    transition: width 0.25s;
  &:hover > div {
    width: 100%;

Hover the text here to reveal it [abc]

How does it work?

An inline table will automatically form around the “reveal” element because its parent is an “inline” element. This inline-table will try to take the minimum possible width. In doing so, it computes the minimum width of the div it contains, but this width depends on a percentage of the table size, so it just assumes this width to be auto.

Therefore, the table-cell ends up having a width corresponding to the minimum width of the contained div, which then gets a relayout where the percentage width is resolved according to the table-cell width (100% of which was its min-content size!).

Published on 2016-08-23 under ALL, WEB, CSS


A javascript file is loading the comments.