CSS pseudo-elements

CSS Pseudo elements


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


Syntax

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 a special style to the first line of text.

In the following example, the browser will format the first line of text of the p element according to the style in the "first-line" pseudo-element:

          <!DOCTYPE html>
<html>
<head>
    <style>
        p:first-line
        {
            color:#ff0000;
            font-variant:small-caps;
        }
    </style>
</head>

<body>
<p>您可以使用:线伪元素添加特殊效果给第一行文本。</p>
</body>
</html>

Run the program Try it


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

Note: The following properties 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

"first-letter" pseudo-element Used to set a special style to the first letter of text:

Example

     <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<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>
</html>

Run the program to try it


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

Note: The following properties 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">A paragraph in an article</p>

The above example will make the first letters of all paragraphs with class article turn 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 and its font size will be xx-large. The rest of the text in the first line will be blue and appear in small caps.

The rest of the text in the paragraph will be displayed in the default font size and color:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p:first-letter
{
	color:#ff0000;
	font-size:xx-large;
}
p:first-line 
{
	color:#0000ff;
	font-variant:small-caps;
}
</style>
</head>

<body>
<p>You can combine the :first-letter and :first-line pseudo-elements to add a special effect to the first letter and the first line of a text!</p>
</body>
</html>

Run the program to try it


CSS - :before pseudo-element

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

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

Example

       <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        h1:before {content:url(https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg);}
    </style>
</head>

<body>
<h1>This is a heading</h1>
<p>The :before pseudo-element inserts content before an element.</p>
<h1>This is a heading</h1>
<p><b>注意:</b>仅当 !DOCTYPE 已经声明 IE8 支持这个内容属性</p>
</body>
</html>

Run Try the program


CSS - :after pseudo-element

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

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

Example

       <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        h1:after {content:url(https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg);}
    </style>
</head>

<body>
<h1>This is a heading</h1>
<p>The :after pseudo-element inserts content after an element.</p>
<h1>This is a heading</h1>
<p><b>注意:</b>仅当!DOCTYPE 已经声明 IE8支持这个内容属性.</p>
</body>
</html>

Run the program to try it


All CSS pseudo-classes/elements

SelectorsExampleExample description
:linka:linkSelect all unvisited links
:visiteda: visitedSelect all visited links
:activea:activeSelect active links
:hovera:hoverThe state of placing the mouse on the link
:focus input:focusSelect the element to have focus after input
:first-letterp:first-letterSelect the first letter of each

element

:first-linep:first-lineselect The first row of each

element

:first-childp:first-child selector match belongs to The <]p> element of the first child element of any element is
:beforep:before in each

Insert content before the element

:afterp:afterInsert content after each

element

:lang(language)p:lang(it) is the lang of the

element Properties select a starting value



Continuing Learning
||
<!DOCTYPE html> <html> <head> <style> p:first-line { color:#ff0000; font-variant:small-caps; } </style> </head> <body> <p>您可以使用:线伪元素添加特殊效果的第一行文本。</p> </body> </html>
submitReset Code
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!