CSS Pseudo Elements

Next ❯Attribute Selectors

Used to select portion of elements you want to style

  • It always start with double colon notation(: :) like " : :pseudo-element "

Syntax

selector::pseudo-element
  • Default value of selector is * , so default syntax is :
    *::pseudo-element {
  /*css properties*/
}
  • turned_in_notPseudo Elements
    • : :after
    • : :before
    • : :first-letter
    • : :first-line
    • : :placeholder
    • : :selection

Pseudo-elementsDescription
: :afterAdds content after the selector element
: :beforeAdds content before the selector element
: :first-lineSelects first-line of selector element
: :first-letterSelects first-letter of selector element
<p>

First line of p </br>
2nd line of p

</p>
<p>

Sample paragraph

</p>

Try below options to see comment

p::after{
  content:"Added after";
  color:purple;
}
p::before{
  content:"Added before";
  color:orange;
}
p::first-line{
  color:red;
}
p::first-letter{
  color:blue;
}
  • Note! For : :after & : :before  'content' property must be declared
    & are used only with elements having closing tags (<hr> exception)


Pseudo-elementsDescription
: :placeholderSelects the placeholder value
: :selectionSelects the portion selected by a user

The placeholder value text-color changed to orange with font-size 14px inside input

  • Some browser do not support this feature
::placeholder{
  color:orange;
  font-size:14px;
}
: :placeholdersubject
: :placeholderclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
::placeholder{
  color:orange;
  font-size:14px;
  opacity:1;
}
</style>
</head>
<body>
<input type="text" placeholder="I am placeholder text..!">
</body>
</html>

Select this text to see the effect of the ::selection

When user selects above text, its background color changed to pink with text-color red

::selection {
  background-color:pink;
  color:red;
}
/* For Firefox */
::-moz-selection{
  background-color:pink;
  color:red;
}
: :selectionsubject
: :selectionclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
::selection{
  background-color:pink;
  color:red;
}
/* For Firefox */
::-moz-selection{
  background-color:pink;
  color:red;
}
</style>
</head>
<body>
<p>Select this text to see the effect</p>
</body>
</html>

  • Attribute Selectors
❮ Prev Pseudo Classes
Next ❯Attribute Selectors
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯