-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathafter-css-demo.html
28 lines (25 loc) · 1.22 KB
/
after-css-demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html lang="en">
<head>
<style>
.link-icon-after::after {
content: '\1F517 ↓';
}
.right-arrow-after::after {
content: '\2192'
}
.box-arrow-after::after {
display: block;
content:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox="0 0 48 48" aria-hidden='true' focusable='false'><path d='M36 24c-1.2 0-2 0.8-2 2v12c0 1.2-0.8 2-2 2h-22c-1.2 0-2-0.8-2-2v-22c0-1.2 0.8-2 2-2h12c1.2 0 2-0.8 2-2s-0.8-2-2-2h-12c-3.4 0-6 2.6-6 6v22c0 3.4 2.6 6 6 6h22c3.4 0 6-2.6 6-6v-12c0-1.2-0.8-2-2-2z'></path><path d='M43.8 5.2c-0.2-0.4-0.6-0.8-1-1-0.2-0.2-0.6-0.2-0.8-0.2h-12c-1.2 0-2 0.8-2 2s0.8 2 2 2h7.2l-18.6 18.6c-0.8 0.8-0.8 2 0 2.8 0.4 0.4 0.8 0.6 1.4 0.6s1-0.2 1.4-0.6l18.6-18.6v7.2c0 1.2 0.8 2 2 2s2-0.8 2-2v-12c0-0.2 0-0.6-0.2-0.8z'></path></svg>");
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<p class="link-icon-after">There should be a link icon after this paragraph.</p>
<br />
<p>There should be a right-pointing arrow after this paragraph. This one is attached to a span.<span class="right-arrow-after"></span></p>
<br />
<p>This one should have a box with NE-pointing arrow after it. <span class="box-arrow-after"></span></p>
</body>
</html>