Webmasters Gallery

The numerous available CSS selectors let us easily access almost each and every HTML element on any given page. The pseudo-element ::first-line even allows us to apply CSS properties to the first line of text in a document, no matter whether the line is automatically or manually wrapped. Unfortunately, besides ::first-line there are no selevtors to manipulate the second, third, last or whichever line. The JavaScript library Lining.js is here to pimp your possibilities. .line[last] Instead of ::last-line Similar to the selectors ::last-child and ::nth-child() that allow you to touch the last or any random child element, Lining.js adds behaiviors for lines of text. INstead of using the (non-existing) selectors ::last-line and ::nth-line(n), the library introduces the classes .line[last] and .line[index=”n”]. After having embedded the library into your document, start with assigning the data attribute data-lining to every text element you want to manipulate with Lining.js. THe attribute expects no value. 1 2 3

Lorem ipsum …

Then use these classes to individually markup lines within the text per CSS. 1 2 3 4 5 6 7 p .line[last] { color: red; } p .line[index=”2″] { font-weight: bold; } .line[last] and .line[index=”2″] active on a text In […]