one:: Before &&: usage of after
: Before
As with the name of a pseudo-element, :before
it is used to insert new content before the content of the specified element. To illustrate:
. Before:before{content: ' You before '; color:red;} < class= "before"> me</div>
Here we add a property to the pseudo-element :before
content
and assign the value to you before
. Let's look at the effect:
me
new content was added before the content of the specified elementyou before
It's not hard for us to find the new content zone added by pseudo-elements the :before
default display
property value is inline
, then we can modify the properties of the new content area, the answer is yes. You can modify its style as you would any other element, so let's change its display
property value to block
.
. Before:before{content: ' You before '; display:block; color:red;} < class= "before"> me</div>
Now let's look at the effect:
:before
creating a new content area from a pseudo-element has turned into a block element
Content Properties
For pseudo-elements :before
and :after
, properties content
must be set, we know that the value of the property can be a string, or it can have other forms, such as pointing to a picture URL
:
Content:url ("Img/icon.png")
use with pseudo-class
Pseudo-elements :before
can also be used with pseudo-classes, here :before
are examples of pseudo-classes that are often used with mates :hover
:
. Before:hover:before{content: ' You before '; color:red;} < class= "before"> me</div>
The mate accessor function attr () uses the
There is also a more common usage, which is used in conjunction with the value function attr()
, such as:
a::before{content:attr (title)} < href= "http://www.segmentfault.com" title= "professional Chinese technical question and answer community for developers" ></a>
This achieves the same effect as the following:
<href= "http://www.segmentfault.com"> Professional Chinese technical question and answer community </for developers a>
: After
The pseudo-element is the same as the :after
pseudo-element :before
type, except that it specifies the property value that appears after the content
content of the specified element, stating the province.
Two: The difference between pseudo-class and pseudo-element
Pseudo-Class types
Pseudo element Kind
pseudo-Class: The Action object is the entire element
For example:
a:link {color: #111}a:hover {color: #222}div:first-child {color: #333}div:nth-child (3) {color: #444}
Although these conditions are not DOM-based, each results in a complete element, such as the entire link, paragraph, div, and so on.
Pseudo elements: Acting on part of an element
For example:
p::first-line {color: #555}p::first-letter {color: #666}a::before {content: "Hello World";}
Pseudo-elements are used as part of an element: the first line of a paragraph or the first letter.
Summarize:
Pseudo-elements are actually the equivalent of forging an element, such as the effect that Before,first-letter achieves is to forge an element, and then add its corresponding effect;
Pseudo-classes have no forged elements, such as first-child just adding styles to child elements.
Pseudo-elements and pseudo-classes are so easily confused because they are similar in effect, but in fact css3
, in order to differentiate between them, it is clear that pseudo-classes are represented by a colon, while pseudo-elements are represented by two colons.
But because of the compatibility problem, so now most of the unified single colon, but aside from the problem of compatibility, we should try to develop good habits when writing, to distinguish between the two.
See the Rainbow after the rain
Source: http://www.cnblogs.com/moqiutao/
If you feel that this article is helpful to your study, please support and encourage more.
CSS properties: Before &&: The use of After, the difference between pseudo-class and pseudo-elements