leading vs line-height in CSS

Question

So in traditional page layout programs, when you do leading, it doesn't effect the first line of a paragraph. However, if you use line-height in CSS, whatever your number is, that will effect the first line. Is there any way to mimic desktop leading in CSS? Basically, I want to only have line-height apply to the subsequent lines, not the first line.

Answer 1

You could try something like:

.class {
    line-height: 1.5;
}
.class::first-line {
    line-height: 1;
}

/* If legacy browsers must be supported */
.class:first-line { 
    line-height: 1;
}

https://developer.mozilla.org/en-US/docs/CSS/::first-line

http://reference.sitepoint.com/css/pseudoelement-firstline