<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pseudo-elements</title>
<style>
p {
border: 1px solid black;
padding: 0.5em;
}
.quote::before {
content: open-quote;
font-size: 2em;
}
.quote::after {
content: close-quote;
font-size: 2em;
}
a.heart::before {
content: url("custom-list-item.png");
}
a.page::before {
content: url("custom-list-item-2.png");
}
a.face::before {
content: url("background-repeat.png") / ":^)";
}
.inline:hover::before {
background: yellow;
}
.inline::before {
content: "This sentence is first, and will turn yellow if you hover the paragraph.";
color: blue;
}
.inline::after {
content: "This sentence is last, still in the same paragraph.";
color: red;
}
.block::before {
display: block;
content: "This should appear as a block, first.";
color: blue;
}
.block::after {
display: block;
content: "This should appear as a block, last.";
color: red;
}
.fancy-list li::marker {
color: green;
}
</style>
</head>
<body>
<h1>::before and ::after</h1>
<p class="inline">There should be a sentence before this, and one after, forming a single paragraph.</p>
<p class="block">There should be a sentence before this, and one after, each as its own block.</p>
<ul class="fancy-list">
<li>This</li>
<li>Is</li>
<li>A</li>
<li>List</li>
<li>With</li>
<li>Green</li>
<li>Markers</li>
</ul>
<p class="quote">This should have chonky quotation marks.</p>
<h2>FIXME: These do not work yet</h2>
<p>
This is some text. Each <a href="#" class="heart">link</a> should have a little <a href="#" class="page">icon</a> before it, <a href="#" class="face">and this one has a tooltip too.</a>
</p>
</body>
</html>
