-
Notifications
You must be signed in to change notification settings - Fork 0
/
adv-css-pseudo-elements.html
120 lines (107 loc) · 2.93 KB
/
adv-css-pseudo-elements.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pseudo elements</title>
<style>
/* Pseudo Elements
Useful for
- adding tooltips dynamically WITHOUT having to alter the HTML
- styling the first letter of a paragraph
pseudo classes require a single colon : - .btn:hover, style element based on state
pseudo elements require a double colon :: - .btn::after
::after
::backdrop
::before
::cue
::first-letter
::first-line
::first-selector-button
::placeholder
etc
*/
*,
/* you must declare pseudo elements explicitly */
*::after,
*::before {
box-sizing: border-box;
}
/* .body {
height: 300%;
} */
p::first-letter {
font-size: 200%;
}
p::first-line {
background-color: skyblue;
}
.box {
position: relative;
width: 200px;
height: 200px;
background-color: red;
color: white;
text-align: center;
}
.box::before {
display: block;
position: sticky;
top: 0;
left: 0;
/* pseudo elements without content will not display */
/* use empty string '' to display */
content: '';
background-color: green;
color: black;
width: 50px;
height: 50px;
text-align: center;
padding: 15px 0;
}
.box::after {
display: block;
position: absolute;
bottom: 0;
right: 0;
/* content can be sourced from a data attribute */
content: attr(data-text);
background-color: blue;
color: lightblue;
width: 50px;
height: 50px;
text-align: center;
}
.text {
position: relative;
width: 50%vw;
}
.text::before {
content: 'before';
color: orange;
/* TIP: How to center a pseudo element tooltip with its parent */
/* position: absolute; */
/* shift left edge of tooltip text to middle of parent's content box */
/* left: 50%; */
/* then shift center of tooltip text left -50% on x-axis.
translate is based on the pseudo elem's size */
/* transform: translate(-50%); */
}
.text::after {
content: 'after';
color: purple;
}
</style>
</head>
<body>
<h2>Heading</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magni exercitationem reiciendis quasi unde sapiente eos
sequi possimus odio ullam sit, est facere et animi repudiandae.
</p>
<div class="box" data-text="hi">some text</div>
<br />
<div class="text">Note the location of the before and after pseudo elements</div>
</body>
</html>