<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>first-line pseudo element</title>
<style>
*::first-line {
color: blue;
text-transform: uppercase;
}
</style>
</head>
<body>
<h2>first-line</h2>
<p>
Styles will only be applied to the first line of this paragraph.
After that, all text will be styled like normal. See what I mean?
the first line of this paragraph will be blue and uppercase.
change the width of the browser window to see magic of ::first-line.
</p>
<span>
The first line of this text will not receive special styling
because it is not a block-level element.
</span>
</body>
</html>
إ