2013-01-12 00:33:40 +04:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>Pseudoelement tests</title>
|
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
|
|
|
<script type="text/javascript" src="../test.js"></script>
|
|
|
|
|
<style>
|
2013-11-26 01:39:35 +04:00
|
|
|
:root .text *::before {
|
2014-10-06 23:46:43 +04:00
|
|
|
content:" root before!";
|
2013-11-26 01:39:35 +04:00
|
|
|
}
|
2014-10-06 23:46:43 +04:00
|
|
|
|
2013-01-12 00:33:40 +04:00
|
|
|
.text *::before {
|
|
|
|
|
content:" before!";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.text *::after {
|
|
|
|
|
content:" after!";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.img *::before{
|
|
|
|
|
content: url(../assets/image.jpg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.img *::after{
|
|
|
|
|
content: url(../assets/image2.jpg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.background *::before{
|
|
|
|
|
background: url(../assets/image_1.jpg);
|
2014-10-06 23:46:43 +04:00
|
|
|
border: 5px solid red;
|
2013-01-12 00:33:40 +04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.background *::after{
|
|
|
|
|
background: url(../assets/image2_1.jpg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.none *::before {
|
|
|
|
|
display:none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.none *::after {
|
|
|
|
|
display:none;
|
|
|
|
|
}
|
2017-08-08 19:50:31 +03:00
|
|
|
body {
|
|
|
|
|
font-family: Arial;
|
|
|
|
|
}
|
2013-01-12 00:33:40 +04:00
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="text">
|
|
|
|
|
<span>Content 1</span>
|
|
|
|
|
<span>Content 2</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="text none">
|
|
|
|
|
<span>Content 1</span>
|
|
|
|
|
<span>Content 2</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="text img">
|
|
|
|
|
<span>Content 1</span>
|
|
|
|
|
<span>Content 2</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="text background">
|
|
|
|
|
<span>Content 1</span>
|
|
|
|
|
<span>Content 2</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
