-
Notifications
You must be signed in to change notification settings - Fork 0
/
hover1.html
48 lines (48 loc) · 1.54 KB
/
hover1.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
<!DOCTYPE html>
<html>
<head>
<title>My Web Page!</title>
<style>
/* this is setting the style for the button */
button {
width: 200px;
height: 50px;
font-size: 24px;
background-color: green;
}
/* when a pointer is hovering over the button the background color will change to said color */
button:hover {
background-color:orange;
}
/* this is a pseudoelement selector,
a: this is to show what part we want effect so <anchor would be affected
content: this is the content in which you want to appear before or after
\21d2 is a hex value for a symbol which we can't create through usual means e.g keyboard */
a::before {
content: "Click here \21d2 ";
font-weight: bold;
}
/* p: to show which part we want affected so the <paragrapgh> tag
selection: when you highlight over text the color and background color will change */
p::selection {
color: red;
background-color: yellow;
}
</style>
</head>
<body>
<div>
<button>Click Me!</button>
</div>
<ul>
<li><a href="#">First Link</a></li>
<li><a href="#">Second Link</a></li>
<li><a href="#">Third Link</a></li>
</ul>
<div>
<p>
Pseudo elements are used to add style in specified parts of an element. You can use "::before"
to add some css property before an element or "::after" to add css propertys after.
</p>
</body>
</html>