-
Notifications
You must be signed in to change notification settings - Fork 0
/
css-before-after.html
122 lines (90 loc) · 4.69 KB
/
css-before-after.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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0046)http://www.quirksmode.org/css/beforeafter.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS2 - ::before and ::after</title>
<link rel="stylesheet" href="//www.quirksmode.org/quirksmode.css">
<link rel="up" href="//www.quirksmode.org/css/contents.html">
<script type="text/javascript" src="./css-before-after_files/quirksmode.js"></script><style>body {padding-top: 161px;}</style>
<style type="text/css">
<!--
p.test::before {
padding-right: 5px;
content: url(css-before-after_files/logo_ppk.gif);
}
p.test::after {
font-style: italic;
content: " and some text after.";
}
-->
</style>
<script type="text/javascript">
function createExtra() {
var x = document.createElement('p');
x.appendChild(document.createTextNode('Generated paragraph.'));
x.className = 'test';
var marker = document.getElementById('footer');
document.body.insertBefore(x,marker);
}
</script>
</head>
<body><p id="lastModPar">Page last changed <span id="lastMod">2 months ago</span></p><div class="pageHeader"><img src="./css-before-after_files/header_swoosh.gif" alt="">
<div class="specialMessage">
<a href="//fronteers.nl/congres/2010">Fronteers 2010, 7 & 8 Oct, Amsterdam</a>
</div>
<div class="mainNav">
<a href="//www.quirksmode.org/compatibility.html">Compatibility</a>
<a href="//www.quirksmode.org/blog/">QuirksBlog</a>
<a href="//www.quirksmode.org/mobile/">Mobile</a>
<a href="//www.quirksmode.org/about/">About</a>
</div>
<a class="logoQuirksmode" href="//www.quirksmode.org/" title="Home"><img src="./css-before-after_files/logo_quirksmode.gif" alt="QuirksMode"></a>
<div class="extraInfo">
<img class="logoPPK" src="./css-before-after_files/logo_ppk.gif" alt="PPK">
<a href="//www.quirksmode.org/sitemap.html">sitemap</a><a href="//www.quirksmode.org/contact.html" class="rightExtraLink">contact</a>
<form action="//www.google.com/search" method="get" title="Uses Google" id="mainSearch">
<input name="q" id="searchTop" value="Search QuirksMode.org">
<input type="submit" id="searchSubmit" value="Search">
</form>
</div>
<!--[if lte IE 6]>
<p class="ie6"><strong>IE6?</strong> Really? Isn’t it time to <a href="/upgrade.html">upgrade to a better browser</a>?
(Unless you’re here for testing purposes, of course.)</p>
<![endif]-->
</div>
<h2 id="top">::before and ::after</h2>
<div id="header" style="top: 186px; left: 0px; "><div id="TOC"><div id="innertoc"><span id="contentheader">show page contents</span><div><a class="page" href="//www.quirksmode.org/css/beforeafter.html#top">Top</a><a class="page" href="//www.quirksmode.org/css/beforeafter.html#link1">Dynamic</a><a class="page" href="//www.quirksmode.org/css/beforeafter.html#link2">content</a></div></div></div>
<div id="siteNav">
<span id="menuLink">show site navigation</span>
<p id="waitMessageNav">Loading site navigation; please wait...</p>
</div></div>
<p class="intro">This is a test of <em>::before</em> and <em>::after</em>, with which you can place text or an image before and after
each HTML element. </p>
<p>Testsheet:</p>
<pre style="margin-right: -568px; ">p.test::before {
padding-right: 5px;
content: url(css-before-after_files/logo_ppk.gif);
}
p.test::after {
font-style: italic;
content: " and some text after.";
}
</pre>
<p style="padding: 1em; margin-left: -1em; margin-bottom: 1.5em; outline: 4px dashed #ff8"><strong>THIS PAGE HAS BEEN MODIFIED FROM THE ORIGINAL.</strong> All occurrences of <code>:(before|after)</code> have been replaced with <code>::$1</code>.</p>
<p class="test">Test paragraph with <code>class="test"</code>.</p>
<h3 id="link1">Dynamic</h3>
<p>When we create an extra paragraph with <code>class="test"</code>, the <code>::before</code> and <code>::after</code>
styles should be applied to it. All browsers do so.</p>
<p><a href="//www.quirksmode.org/css/beforeafter.html#" onclick="createExtra(); return false">Create an extra paragraph</a> with class="test".</p>
<h3 id="link2">content</h3>
<p>A vital part of <code>::before</code> and <code>::after</code> is the
<a href="//www.quirksmode.org/css/beforeafter_content.html"><code>content</code> declaration</a>.</p>
<div id="footer">
<a href="//www.quirksmode.org/index.html">Home</a>
<a href="//www.quirksmode.org/sitemap.html">Sitemap</a>
<a href="//www.quirksmode.org/contact.html">Contact</a>
<a href="//www.quirksmode.org/about/copyright.html">Copyright</a><br>
<a href="//www.quirksmode.org/book/">Buy my book</a>
<p class="conference">
<a href="//fronteers.nl/"><img src="./css-before-after_files/fronteers-180x60.png" alt="Fronteers"></a>
</p></div>
</body></html>