<!doctype html>
<html>
	<head>
		<title>More pseudo-classes</title>
		<link href="style.css" rel="stylesheet">
	</head>
	<body>
		<h1>Pseudo-elements are clever</h1>
		<p>The first letter of this paragraph will be red, and the first line maroon, no matter where it wraps or how long it ends up being.</p>
		<blockquote>
			You can use these to <a href="https://newschool.edu">embellish links</a>
		</blockquote>
	</body>
</html>
/* These are inserted before and after the heading. */
h1::before,
h1::after {
	color: red;
	content: ' ••• ';
}

p::first-letter {
	color: red;
	font-size: larger;
	font-weight: bold;
}

p::first-line { color: maroon; }

/* After external links. */
a[href^='https://']::after { content: ' ↗'; }