2022-02-23 19:39:58 +00:00
<!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;
}
2022-02-25 17:28:34 +00:00
.fancy-list li::marker {
color: green;
}
2022-02-23 19:39:58 +00:00
< / 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 >
2022-02-25 17:28:34 +00:00
< 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 >
2022-02-28 15:48:26 +00:00
< h2 > FIXME: These do not work yet< / h2 >
< 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 >
2022-02-23 19:39:58 +00:00
< / body >
< / html >