CSS: CSS pseudo-elements

ylbtech-CSS: CSS pseudo-elements

 

1.Back to top

1、

CSS  pseudo-elements

---

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

---

grammar

Pseudo-element syntax:

selector:pseudo-element {property:value;}

CSS classes can also use pseudo-elements:

selector.class:pseudo-element {property:value;}

---

:first-line pseudo-element

The "first-line" pseudo-element is used to set special styles to the first line of text.

In the following example, the browser formats the first line of text in the p element according to the styles in the "first-line" pseudo-element:

example

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

try it"

Note: The "first-line" pseudo-element can only be used for block-level elements.

Note:  The following attributes can be applied 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

---

:first-letter pseudo-element

The "first-letter" pseudo-element is used to set special styles to the first letter of the text:

example

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

try it"

Note:  The "first-letter" pseudo-element can only be used for block-level elements.

Note:  The following attributes can be applied 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">文章段落</p> 

The above example will make the first letter of all paragraphs with class article red.

---

multiple pseudo-elements

Can be used in combination with multiple pseudo-elements.

In the example below, the first letter of the paragraph will be displayed in red with a font size of xx-large. The rest of the text in the first line will be blue and displayed in small caps.

The rest of the text in the paragraph will be displayed in 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"

---

CSS - :before pseudo-element

The ":before" pseudo-element can insert new content before the element's content.

The following example inserts an image before each <h1> element:

example

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

try it"

---

CSS - :after pseudo-element

The ":after" pseudo-element can insert new content after the element's content.

The following example inserts an image after each <h1> element:

example

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

try it"

---

All CSS pseudo-classes/elements

Selector	Example	Example description
:link	a:link	Select all unvisited links
:visited	a:visited	Select all visited links
:active	a:active	Select Active link
:hover	a:hover	The state of the mouse over the link
:focus	input:focus	Select element has focus after input
:first-letter	p:first-letter	Select the first letter of each <p> element
:first-line	p:first-line	Selects the first row of each <p> element
:first-child	p:first-child	The selector matches a <]p> element that is the first child of any element
:before	p:before	Insert content before each <p> element
:after	p:after	Insert content after each <p> element
:lang(language)	p:lang(it)	Choose a starting value for the lang attribute of the <p> element

2、

2.Back to top

 

3.Back to top

 

4.Back to top

 

5.Back to top

1、

http://www.runoob.com/css/css-pseudo-elements.html

2、

 

6.Back to top

 

Author: ylbtech Source: http://ylbtech.cnblogs.com/ The copyright of this article belongs to the author and the blog garden. Reprints are welcome, but this statement must be retained without the author's consent, and a link to the original text should be given in an obvious position on the article page, otherwise Reserve the right to pursue legal responsibility.