The role of content: '.' in css

There is a p as an external container. If the internal p is set to float style, the external container p cannot be opened. Add the content in the content at the end of the element where clearfix is ​​applied to achieve the purpose of opening the container. Purpose What is the use of content: "."; in this code, what problem does it solve, and why should it be used?

The code is as follows:

.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}

1--

When writing HTML code , found that in browsers such as Firefox that comply with W3C standards, if there is a p as an external container, and the internal p is set to float style, the external container p cannot be opened because there is no clear inside.
This clearfix CSS uses the after pseudo-object, which will add the content in content at the end of the element to which clearfix is ​​applied. A period "." is added here, and its display is set to block; the height is set to 0; clear is set to both; and visibility is set to hidden. This achieves the purpose of opening the container.

2-- The syntax of

content is rarely used. I just checked the information:

Grammar:

The code is as follows:

content : attr(alt) | counter(name) |
counter(name, list-style-type) |
counters(name, string) |
counters(name, string, list-style-type) |
no-close-quote | no-open-quote | close-quote |
open-quote | string | url(url)

Value:

The code is as follows:

attr(alt)
:

Use the text of the alt attribute of the object

The code is as follows:

counter(name)
:

Use a named counter

The code is as follows:

counter(name, list-style-type)
:

Use a named counter Named counters and comply with the specified list-style-type attribute

The code is as follows:

counters(name, string)
:

Use all named counters

The code is as follows:

counters(name, string,
list-style-type)
:

Use all named counters and comply with the specified list-style-type attribute

The code is as follows:

no-close-quote
:

Does not insert the post-tag of the quotes attribute. But increasing its nesting level

The code is as follows:

no-open-quote
:

does not insert the front tag of the quotes attribute. But reduce its nesting level

The code is as follows:

close-quote
:

Insert the post-mark of the quotes attribute

Code As follows:

open-quote
:

Insert the prefix tag of quotes attribute

The code is as follows:

string
:

Use the string enclosed in quotation marks

The code is as follows:

url(url)
:

Use the specified absolute or relative url. Address description: used with :after and :before pseudo-elements, before or before the object Display content later. The corresponding script attribute is content . Example:

The code is as follows:

p:after { content: url("http:www.devguru.com");
text-decoration: none ; }
p:before { content: url("beep.wav") }

The question you asked: According to the grammar, it should be "string: Use quotation marks The "enclosed string" should mean that it is displayed after the .clearfix object. This character is

The above is the detailed content of The role of content: '.' in css. For more information, please follow other related articles on the PHP Chinese website!