What are the css pseudo elements? Detailed introduction to css pseudo-elements (with examples included)-CSS Tutorial-php.cn

What are the css pseudo elements? Detailed introduction to css pseudo-elements (with examples included)

寻∝梦

Release： 2018-09-08 13:43:10

Original

10762 people have browsed it

Today’s article mainly introduces four pseudo-elements of CSS style. The css pseudo-elements explained are relatively common in daily life. Now let’s take a look. Get up and read this article.

First of all, let’s take a look at the four pseudo-elements in the css style introduced in this article:

:before This pseudo-element defines adding content before the element
:after This pseudo-element defines adding content after the element
:first-line This pseudo-element defines Element adds a special style to the first line of text
:first-letter This pseudo-element adds a special style to the first letter of text

These four pseudo-elements are commonly used elements when writing code.

Now let’s look at the first one:

:before, this element adds content before the element.

Let’s take a look at a complete example to understand:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
</head>
<body>
<P>我是一个段落，这一段只有我这一句话</P>
</body>
</html>

Copy after login

This is an ordinary text document, and the display is normal. Look at the picture first, and then Comparison:

What are the css pseudo elements? Detailed introduction to css pseudo-elements (with examples included)

This is a very normal text. Next, let’s insert a CSS-style pseudo element to see the effect:

in the head Add the css style inside:

<style type="text/css">
p:before{content: "这里是PHP中文网"}
</style>

Copy after login

The result will come out. The text in the p tag is still the same text. See the effect displayed in the browser:

What are the css pseudo elements? Detailed introduction to css pseudo-elements (with examples included)

Is the effect very obvious? Is the text in before going to the front of the p tag?

I talked about the first before pseudo-element, now let’s talk about the second pseudo-element:

:after: It’s very simple to add content after the element. , just replace the before in the previous code with after.

Let’s take a look at the code:

<title>PHP中文网</title>
<style type="text/css">
p:after{content: "这里是PHP中文网"}
</style>
</head>
<body>
<P>我是一个段落，这一段只有我这一句话</P>
</body>

Copy after login

Okay, the code is out, let’s see if the effect displayed in the browser is the same as above:

What are the css pseudo elements? Detailed introduction to css pseudo-elements (with examples included)

It’s exactly the same as what was said above, except that the content is added at the end, which is obvious.

Now let’s talk about the usage of the third pseudo-element:

:first-line: Set the change of the first line, and the second line will remain unchanged. .

Let’s take an example:

<title>PHP中文网</title>
<style type="text/css">
p:first-line{color:red}
</style>
</head>
<body>
<P>我是一个段落，这一段只有我这一句话；我是一个段落，这一段只有我这一句话；我是一个段落，这一段只有我这一句话；我是一个段落，这一段只有我这一句话；我是一个段落，这一段只有我这一句话；我是一个段落，这一段只有我这一句话</P>
</body>

Copy after login

Because it is to be displayed on the first line, I copied several copies of the text. Let’s take a look at the effect of the browser display:

What are the css pseudo elements? Detailed introduction to css pseudo-elements (with examples included)

Have the first line changed completely, but the second and third lines have not changed? This will make it easier for everyone to know the usage of these pseudo elements. (If you want to see more, go to the PHP Chinese website CSS Learning Manual to learn)

The last one is: first-letter pseudo-element:

:first-letter: Yes Defines the variation of the first letter of the text.

Let’s change the first sentence of the above text into English. Now let’s look at the code:

<style type="text/css">
p:first-letter{color:red}
</style>

Copy after login

Look at the rendering:

What are the css pseudo elements? Detailed introduction to css pseudo-elements (with examples included)

The first letter of the text has changed. Is this successful? Generally, we use it to achieve effects such as amplification.

The above is the entire content of this article about css style pseudo elements. Four commonly used pseudo-elements are introduced, hoping to help everyone (if you want to learn more about CSS styles, go to the css Learning Manual column on the PHP Chinese website). If you have any questions, you can leave a message below.

【Editor's Recommendation】

How to add border style to css table? Summary of css table border style (with complete examples)

How to make the HTML a tag change color on mouse hover, css control a tag mouse hover style detailed explanation

The above is the detailed content of What are the css pseudo elements? Detailed introduction to css pseudo-elements (with examples included). For more information, please follow other related articles on the PHP Chinese website!