4 ms·

Maybe you can explain a bit better what this does? It looks like the content is resizing in chrome based on the number of characters in the :before tag. is th

• woah 13y ago
  Yea, the width is a percentage. It's meant to simulate a fluid grid. I'm working on a site right now that has a row of boxes with excerpts of longer articles. I would like them to all have the same height for neatness, but I don't want to set an explicit height because I would like them to resize to contain roughly the same amount of text at different widths. So the :before pseudoelement on #container has a bunch of _'s and spaces that reflow like any text will. #element has the actual content, and is absolutely positioned to the edges of its parent. So as the width changes, the text in the :before element reflows and expands #container's size. #element simply follows the size of #container. The :after pseudoelement is just there for decoration.
• woah 13y ago
  Wrote a stylus function that automatically applies the right properties to achieve this effect: fake-truncate(num) fill(num) buf = '' for index in 1..num buf += '_ ' position: relative overflow: hidden &:before content: fill(num) visibility: hidden display: block ._content position: absolute top: 0 bottom: 0 left: 0 right: 0