mirror of
https://github.com/RGBCube/serenity
synced 2025-10-31 11:22:45 +00:00
84 lines
2.2 KiB
HTML
84 lines
2.2 KiB
HTML
<!--
|
|
~ Copyright (c) 2022, Sam Atkins <atkinssj@serenityos.org>
|
|
~
|
|
~ SPDX-License-Identifier: BSD-2-Clause
|
|
-->
|
|
|
|
<!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="quote">This should have chonky quotation marks.</p>
|
|
<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>
|
|
<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>
|
|
</body>
|
|
</html>
|