On the css pseudo-elements :: before and :: after
The css :: before and :: after have been widely used in our daily development, and they can make use of our documentation structure is more concise. But many people :: before and :: after still not particularly understand, what exactly are they doing? How to use them? When should I use them? The author summarizes some understanding and experience in the use of pseudo-elements.
First, the concept:
1. Definitions
The CSS ::before(::after) pseudo-element matches a virtual first(last) child of the selected element. It is typically used to add cosmetic content to an element by using the content CSS property. This element is inline by default.
By definition we know :: before and :: after matching a virtual elements, is mainly used to increase the decorative elements of the current content. The content of his show is its own " content" Default is inline elements.
In fact :: before and :: after being introduced css, the core purpose of, or in order to achieve semantic. In our actual development time often have this experience, in order to achieve some effect, created a number of nodes in the document no actual content, join or assist style of text, such as:
<style>
ul{
list-style: none;
}
li{
display: inline;
}
</style>
<nav>
<ul>
<li>HTML 5</li>
<li>|</li>
<li>CSS3</li>
<li>|</li>
<li>JavaScript</li>
</ul>
</nav>
When shows like this:
Obviously, the example of the "|" is displayed only when a break character, no practical significance, and li elements where he was only just for decoration created, this should not be created within the document. Then create a node can not go by the style (css) to them instead of out of it?
For such a demand, it was born and :: after :: before, these two pseudo-elements is equivalent to the current element of decor, they are not the node does not appear in the dom tree, but with nodes on display effect. We use the :: before and :: after reconstruction at the top of the code:
<style>
ul{
list-style: none;
}
li{
display: inline;
}
li:not(:last-child)::after{
content: "|";
}
</style>
<nav>
<ul>
<li>HTML 5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
</nav>
Display does not change, but the document structure becomes more clear.
2. Use
:: before and :: after the very simple to use, it can be considered the existence of two elements one after on the element, these two elements are inline elements by default, but we can add to their style. :: :: before and after the time of use must pay attention, you must set the content, otherwise these two pseudo-elements is not showing up. The content property, the contents of which are as pseudo-elements embedded in them. Such as:
<style>
p:before{
content: "H";
p:after{
content: "d";
}
</style>
<p>ello Worl</p>
Display a complete Hello World.
:: before and :: after virtual elements will not affect the location of the real elements of the document, on the: first-child or: last-child pseudo-class selectors that will not be affected.
3. Operation
:: before and :: after a virtual node, rather than being a node, which is not documont find the corresponding Node object in the previous example, we do the following js code:
console.log( document.querySelector("ul").childNodes)；
Is only obtained a NodeList object 3 nodes, and two dummy elements are not in the object. :: before and :: after because not a real node, so we did not get them, clicks and other user settings do not send event. :: before and :: after, though not set events, but also captures user events, and the event "bubble" element to the pseudo-element is located. The reason why the "bubble" word in quotes, because he was not really bubbling, more precisely :: before and :: after helping to capture the element where the event go, srcElement object event is an element where the pseudo-element rather than the pseudo-element itself.
document can not be obtained and the node object :: after :: before the corresponding, but it may be acquired by the style property css interfaces, such as:
window.getComputedStyle(
document.querySelector('li'), ':before'
)
Return a CSSStyleDeclaration object, you can get the current style values.
Reprinted from: https://www.cnblogs.com/laden666666/p/6089880.html
What are image fonts?
Similar picture fonts, during use, can change the style, and the style changes the picture sometimes need to re-design (color, tilt)
How to use icon fonts?
Specific methods are given below IcoMoon
1, open IcoMoon site, click IconMoon App.
2, after opening a specific icon interface, you can add your own icons to generate, you can also use the icon he gives, under the default icon will add Icons From Library Click to see more icons to choose from (free has paid).
3. Click Generate Font generates interface icons of the currently selected, will become the lower right corner of the Generate Font Download, you can also download the relevant settings (for example: let the support classes ie6 / 7's).
4, will have the following files after the download is complete, these files are the best preserved, not arbitrarily delete.
5, then give a specific use icon fonts (you can also see related content using the font icon css file --style.css self)
Copy (1), the font folder to your project and declare the font, why the introduction of multiple files, because some browsers support the format is not the same (here code does not need memory, because basically all the same, you can directly copy)
font- @ face { font -family: 'icomoon'; / * declare the font name, you can set your own, when the application corresponding to * / src: url ( '? Fonts / icomoon.eot lep7lm' ); src: url ( 'Fonts / icomoon.eot? lep7lm # iefix') format ( 'Embedded OpenType-' ), url ( 'Fonts / icomoon.ttf? lep7lm') format ( 'TrueType' ), url ( 'Fonts / icomoon.woff? lep7lm ') format (' WOFF ' ), url ( ' Fonts / icomoon.svg lep7lm # icomoon ') format (' SVG '? ); font - weight: Normal; font-style: normal; }
(2), using the font
.IconMoon { font-family: 'icomoon'; }
(3), particularly the corresponding icon display
Css selectors using pseudo-element to be added before
<li> <span class = " icon-home"> In this preceded by a home icon </ span> </ Li> <Li> <span class = "icon-smile2"> in which front a smile2 icon </ span> </ Li> <Li> <span class = "icon-tongue2"> in which front a tongue2 icon </ span> </ Li> <Li> <span class = "icon-SAD2"> earlier in this a sad2 icon </ span> </ li> <Li> <span class = "icon-wink"> a wink at this front icon </ span> </ li>
Css code corresponding to:
.icon-home:before {/*content的值是对应的图标代码*/
content: "\e900";
}
.icon-smile2:before {
content: "\e9e2";
}
.icon-tongue2:before {
content: "\e9e4";
}
.icon-sad2:before {
content: "\e9e6";
}
.icon-wink:before {
content: "\e9e7";
}
(4), as said before, is the font on the nature of these icons, so you can easily to change the color, size, cast a shadow effects
Possible code
6, when we want to add a new font icon or minus icons, simply open the Web site again, into IconMoon App page, and then click the Import Icons will selection.json before we downloaded file in the font directory, you can be selected on the basis of our previous operations on again, and very convenient to use.
Above is a summary of the relevant Chinese php web related content.
The css :: before and :: after have been widely used in our daily development, and they can make use of our documentation structure is more concise. But many people :: before and :: after still not particularly understand, what exactly are they doing? How to use them? When should I use them? The author summarizes some understanding and experience in the use of pseudo-elements.
First, the concept:
1. Definitions
The CSS ::before(::after) pseudo-element matches a virtual first(last) child of the selected element. It is typically used to add cosmetic content to an element by using the content CSS property. This element is inline by default.
By definition we know :: before and :: after matching a virtual elements, is mainly used to increase the decorative elements of the current content. The content of his show is its own " content" Default is inline elements.
In fact :: before and :: after being introduced css, the core purpose of, or in order to achieve semantic. In our actual development time often have this experience, in order to achieve some effect, created a number of nodes in the document no actual content, join or assist style of text, such as:
<style>
ul{
list-style: none;
}
li{
display: inline;
}
</style>
<nav>
<ul>
<li>HTML 5</li>
<li>|</li>
<li>CSS3</li>
<li>|</li>
<li>JavaScript</li>
</ul>
</nav>
When shows like this:
Obviously, the example of the "|" is displayed only when a break character, no practical significance, and li elements where he was only just for decoration created, this should not be created within the document. Then create a node can not go by the style (css) to them instead of out of it?
For such a demand, it was born and :: after :: before, these two pseudo-elements is equivalent to the current element of decor, they are not the node does not appear in the dom tree, but with nodes on display effect. We use the :: before and :: after reconstruction at the top of the code:
<style>
ul{
list-style: none;
}
li{
display: inline;
}
li:not(:last-child)::after{
content: "|";
}
</style>
<nav>
<ul>
<li>HTML 5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
</nav>
Display does not change, but the document structure becomes more clear.
2. Use
:: before and :: after the very simple to use, it can be considered the existence of two elements one after on the element, these two elements are inline elements by default, but we can add to their style. :: :: before and after the time of use must pay attention, you must set the content, otherwise these two pseudo-elements is not showing up. The content property, the contents of which are as pseudo-elements embedded in them. Such as:
<style>
p:before{
content: "H";
p:after{
content: "d";
}
</style>
<p>ello Worl</p>
Display a complete Hello World.
:: before and :: after virtual elements will not affect the location of the real elements of the document, on the: first-child or: last-child pseudo-class selectors that will not be affected.
3. Operation
:: before and :: after a virtual node, rather than being a node, which is not documont find the corresponding Node object in the previous example, we do the following js code:
console.log( document.querySelector("ul").childNodes)；
Is only obtained a NodeList object 3 nodes, and two dummy elements are not in the object. :: before and :: after because not a real node, so we did not get them, clicks and other user settings do not send event. :: before and :: after, though not set events, but also captures user events, and the event "bubble" element to the pseudo-element is located. The reason why the "bubble" word in quotes, because he was not really bubbling, more precisely :: before and :: after helping to capture the element where the event go, srcElement object event is an element where the pseudo-element rather than the pseudo-element itself.
document can not be obtained and the node object :: after :: before the corresponding, but it may be acquired by the style property css interfaces, such as:
window.getComputedStyle(
document.querySelector('li'), ':before'
)
Return a CSSStyleDeclaration object, you can get the current style values.
Reprinted from: https://www.cnblogs.com/laden666666/p/6089880.html
What are image fonts?
Similar picture fonts, during use, can change the style, and the style changes the picture sometimes need to re-design (color, tilt)
How to use icon fonts?
Specific methods are given below IcoMoon
1, open IcoMoon site, click IconMoon App.
2, after opening a specific icon interface, you can add your own icons to generate, you can also use the icon he gives, under the default icon will add Icons From Library Click to see more icons to choose from (free has paid).
3. Click Generate Font generates interface icons of the currently selected, will become the lower right corner of the Generate Font Download, you can also download the relevant settings (for example: let the support classes ie6 / 7's).
4, will have the following files after the download is complete, these files are the best preserved, not arbitrarily delete.
5, then give a specific use icon fonts (you can also see related content using the font icon css file --style.css self)
Copy (1), the font folder to your project and declare the font, why the introduction of multiple files, because some browsers support the format is not the same (here code does not need memory, because basically all the same, you can directly copy)
font- @ face { font -family: 'icomoon'; / * declare the font name, you can set your own, when the application corresponding to * / src: url ( '? Fonts / icomoon.eot lep7lm' ); src: url ( 'Fonts / icomoon.eot? lep7lm # iefix') format ( 'Embedded OpenType-' ), url ( 'Fonts / icomoon.ttf? lep7lm') format ( 'TrueType' ), url ( 'Fonts / icomoon.woff? lep7lm ') format (' WOFF ' ), url ( ' Fonts / icomoon.svg lep7lm # icomoon ') format (' SVG '? ); font - weight: Normal; font-style: normal; }
(2), using the font
.IconMoon { font-family: 'icomoon'; }
(3), particularly the corresponding icon display
Css selectors using pseudo-element to be added before
<li> <span class = " icon-home"> In this preceded by a home icon </ span> </ Li> <Li> <span class = "icon-smile2"> in which front a smile2 icon </ span> </ Li> <Li> <span class = "icon-tongue2"> in which front a tongue2 icon </ span> </ Li> <Li> <span class = "icon-SAD2"> earlier in this a sad2 icon </ span> </ li> <Li> <span class = "icon-wink"> a wink at this front icon </ span> </ li>
Css code corresponding to:
.icon-home:before {/*content的值是对应的图标代码*/
content: "\e900";
}
.icon-smile2:before {
content: "\e9e2";
}
.icon-tongue2:before {
content: "\e9e4";
}
.icon-sad2:before {
content: "\e9e6";
}
.icon-wink:before {
content: "\e9e7";
}
(4), as said before, is the font on the nature of these icons, so you can easily to change the color, size, cast a shadow effects
Possible code
6, when we want to add a new font icon or minus icons, simply open the Web site again, into IconMoon App page, and then click the Import Icons will selection.json before we downloaded file in the font directory, you can be selected on the basis of our previous operations on again, and very convenient to use.
Above is a summary of the relevant Chinese php web related content.