diff options
| -rw-r--r-- | Base/res/html/misc/pseudo-elements.html | 70 | ||||
| -rw-r--r-- | Base/res/html/misc/welcome.html | 1 |
2 files changed, 71 insertions, 0 deletions
diff --git a/Base/res/html/misc/pseudo-elements.html b/Base/res/html/misc/pseudo-elements.html new file mode 100644 index 0000000000..e0f98f3cc2 --- /dev/null +++ b/Base/res/html/misc/pseudo-elements.html @@ -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> diff --git a/Base/res/html/misc/welcome.html b/Base/res/html/misc/welcome.html index 3cd6292dd1..3043c1e1d9 100644 --- a/Base/res/html/misc/welcome.html +++ b/Base/res/html/misc/welcome.html @@ -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> |