Skip to main content

CSS Pseudo-elements

CSS pseudo-elements are used to add special effects to some selectors.

Syntax

The syntax of pseudo-elements:
selector:pseudo-element {property:value;}
CSS classes can also be used with pseudo-elements:
selector.class:pseudo-element {property:value;}

The :first-line Pseudo-element

The "first-line" pseudo-element is used to add a special style to the first line of a text.
In the following example the browser formats the first line of text in a p element according to the style in the "first-line" pseudo-element (where the browser breaks the line, depends on the size of the browser window):

Example

p:first-line
{
color:#ff0000;
font-variant:small-caps;
}

Try it yourself »
Note: The "first-line" pseudo-element can only be used with block-level elements.
Note: The following properties apply to the "first-line" pseudo-element:
  • font properties
  • color properties 
  • background properties
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

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

p:first-letter
{
color:#ff0000;
font-size:xx-large;
}

Try it yourself »
Note: The "first-letter" pseudo-element can only be used with block-level elements.
Note: The following properties apply to the "first-letter" pseudo- element:
  • font properties
  • color properties 
  • background properties
  • margin properties
  • padding properties
  • border properties
  • text-decoration
  • vertical-align (only if "float" is "none")
  • text-transform
  • line-height
  • float
  • clear

Pseudo-elements and CSS Classes

Pseudo-elements can be combined with CSS classes:
p.article:first-letter {color:#ff0000;}

<p class="article">A paragraph in an article</p>
The example above will display the first letter of all paragraphs with class="article", in red.

Multiple Pseudo-elements

Several pseudo-elements can also be combined.
In the following example, the first letter of a paragraph will be red, in an xx-large font size. The rest of the first line will be blue, and in small-caps. The rest of the paragraph will be the default font size and color:

Example

p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}

Try it yourself »

CSS - The :before Pseudo-element

The ":before" pseudo-element can be used to insert some content before the content of an element.
The following example inserts an image before each <h1> element:

Example

h1:before
{
content:url(smiley.gif);
}

Try it yourself »

CSS - The :after Pseudo-element

The ":after" pseudo-element can be used to insert some content after the content of an element.
The following example inserts an image after each <h1> element:

Example

h1:after
{
content:url(smiley.gif);
}

Try it yourself »

All CSS Pseudo Classes/Elements

Selector Example Example description
:link a:link Selects all unvisited links
:visited a:visited Selects all visited links
:active a:active Selects the active link
:hover a:hover Selects links on mouse over
:focus input:focus Selects the input element which has focus
:first-letter p:first-letter Selects the first letter of every <p> element
:first-line p:first-line Selects the first line of every <p> element
:first-child p:first-child Selects every <p> elements that is the first child of its parent
:before p:before Insert content before every <p> element
:after p:after Insert content after every <p> element
:lang(language) p:lang(it) Selects every <p> element with a lang attribute value starting with "it"

Comments

Post a Comment

Popular posts from this blog

GK MCQs and facts

KNOWLEDGE Knowledge is a familiarity with someone or something, which can include information, facts, descriptions, and/or skills acquired through experience or education. It can refer to the theoretical or practical understanding of a subject. It can be implicit (as with practical skill or expertise) or explicit (as with the theoretical understanding of a subject); and it can be more or less formal or systematic.In philosophy, the study of knowledge is called epistemology, and the philosopher Plato famously defined knowledge as "justified true belief." There is however no single agreed upon definition of knowledge, and there are numerous theories to explain it.  Knowledge acquisition involves complex cognitive processes: perception, learning, communication, association and reasoning; while knowledge is also said to be related to the capacity of acknowledgment in human beings. source : wiki Knowledge - Wikipedia, the free encyclopedia A series of MCQs on GK  ...
Post a Comment
Read more

Xiaomi Mi 11 Ultra review

  Introduction Now that the Pro moniker has gone mainstream, it's Ultra that has come to represent the cream of the crop, and the Xiaomi Mi 11 Ultra can wear that badge proudly. Limited to its home market last year, the ultimate Mi has gone global this time around, and we're happy to have it for review today. We're torn whether it's the camera system's physical appearance that is more striking or the hardware inside. A simply massive raised area on the back looks bolted on, almost after the fact, it's hard to miss, and it's a great conversation starter even if it's not everyone's cup of tea. But its size is warranted - the main camera packs the largest sensor used on a modern-day smartphone, and next to it - two more modules unmatched in their own fields, in one way or another. Oh, and yes, there's also a display here - because why not, but also because it can be useful. There's a lot more than 1.1 inches of ...
Post a Comment
Read more

Google+ Pages: Five things you need to know before signing up

After several months of anticipation, Google finally announced Google+ Pages for local businesses, groups, sports, brands, organizations and more. Just a few weeks ago Google granted its Apps customers access to the social network, slowly growing its user base.After yesterday's announcement, users flocked to create a Google+ Page for their business, but many were disappointed with what they saw. Google+ Pages bear a significant resemblance to personal Google+ pages--in fact, there are very few differences and few features that users expected to see.Here's a rundown of what you and your business should know about Google+ Pages, and how to remedy problems you may have already encountered. 1. Claim your organization's Google+ Page ASAP When Google opened the flood gates to businesses and organizations yesterday, there was a rush to lay claim to brand names. One flaw in the sign-up page for Google+ Pages was the lack of verification
Post a Comment
Read more