system/serenity
system/serenity
1
0
Fork 0
mirror of https://github.com/SerenityOS/serenity synced 2024-10-15 04:13:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Base: Add a pseudo-element test page

Browse source
This commit is contained in:
Sam Atkins 2022-02-23 19:39:58 +00:00 committed by Andreas Kling
parent 692757c489
commit a9ad72cc0f
2 changed files with 71 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
Base/res/html/misc/pseudo-elements.html Normal file
View file

@ -0,0 +1,70 @@
<!--
~ 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;
}
</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>
</body>
</html>

1
Base/res/html/misc/welcome.html
View file

@ -133,6 +133,7 @@
<li><a href="position-absolute-top-left.html">position: absolute; for top and left</a></li>
<li><a href="cascade-keywords.html">Cascade keywords (initial, inherit, unset)</a></li>
<li><a href="inline-node.html">Styling "inline" elements</a></li>
<li><a href="pseudo-elements.html">Pseudo-elements (::before, ::after, etc)</a></li>
</ul>
<h2>JavaScript/Wasm</h2>