The cursor property of CSS allows you to specify the type of cursor that should be displayed to the user.
auto Shape of the cursor depends on the context area it is over.
crosshair A crosshair or plus sign
default An arrow
pointer A pointing hand
move The I bar
e-resize The cursor indicates that an edge of a box is to be moved
ne-resize The cursor indicates that an edge of a box is to be moved up
nw-resize The cursor indicates that an edge of a box is to be moved up
n-resize se-resize moved down and sw-resize moved down and left
s-resize moved down (south)
w-resize moved left (west)
text The I bar
wait An hour glass
help A question mark or balloon
Examples:
<p>Move the mouse over the words to see the cursor change:</p>
<div style="cursor:auto">Auto</div>
<div style="cursor:crosshair">Crosshair</div>
<div style="cursor:default">Default</div>
<div style="cursor:pointer">Pointer</div>
<div style="cursor:move">Move</div>
<div style="cursor:e-resize">e-resize</div>
<div style="cursor:ne-resize">ne-resize</div>
<div style="cursor:nw-resize">nw-resize</div>
<div style="cursor:n-resize">n-resize</div>
<div style="cursor:se-resize">se-resize</div>
<div style="cursor:sw-resize">sw-resize</div>
<div style="cursor:s-resize">s-resize</div>
<div style="cursor:w-resize">w-resize</div>
<div style="cursor:text">text</div>
<div style="cursor:wait">wait</div>
<div style="cursor:help">help</div>
What are Pseudo-Elements?
A CSS pseudo-element is used to style specified parts of an element. Style the first letter, or line, of an element, Insert content before, or after, the content of an element.
Syntax
selector::pseudo-element
{
property:value;
}
The ::first-line Pseudo-element
It is used to add a special style to the first line of a text.
Example:
<head>
<style>
p::first-line
{
color: #ff00ff;
font-variant: small-caps;
}
</style>
</head>
<body>
<p>You can use the ::first-line pseudo-element to add a special effect to the first line of a text. Some more text. And even more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more.</p>
</body>
The ::first-letter Pseudo-element
The ::first-letter pseudo-element is used to add a special style to the first letter of a text.
Example:
<head>
<style>
p::first-letter
{
color: #ff0000;
font-size: xx-large;
}
</style>
</head>
<body>
<p>You can use the ::first-letter pseudo-element to add a special effect to the first character of a text!</p>
</body>
CSS - The ::before Pseudo-element
The ::before pseudo-element can be used to insert some content before the content of an element.
Example:
<head>
<style>
h1::before {
content: url(smiley.png);
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The ::before pseudo-element inserts content before the content of an element.</p>
</body>
CSS - The ::after Pseudo-element
The ::after pseudo-element can be used to insert some content after the content of an element.
Example:
<head>
<style>
h1::after {
content: url(https://file-hosting.dashnexpages.net/sahrudayahelpinghands-students-org/smiley.png);
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The ::after pseudo-element inserts content after the content of an element.</p>
</body>
CSS - The ::selection Pseudo-element
The ::selection pseudo-element matches the portion of an element that is selected by a user.
Example:
<head>
<style>
::-moz-selection { /* Code for Firefox */
color: red;
background: yellow;
}
::selection {
color: red;
background: yellow;
}
</style>
</head>
<body>
<h1>Select some text on this page:</h1>
<p>This is a paragraph.</p>
<div>This is some text in a div element.</div>
</body>