Only Foolish
Links: https://www.zhihu.com/question/22022905/answer/20585820
Source: Know
Copyright belongs to the author, please contact the author for authorization.
- : What is before (or: after)?
A: Pseudo-element (note, not pseudo-Class).
Although it is included in the CSS3 standard, but in fact the mainstream browser has been supporting pseudo-elements, which includes the ie8+.
The pseudo-element actually does not exist in the HTML DOM, but it is rendered as a node of HTML by the browser, and in the same way as the #twitter:before that the title master mentions, is the insertion of a child element (node) at the beginning of the #twitter tag, in the same vein: After is a child element that is inserted at the end of the element, it has the same effect as the following HTML:
<div id="twitter"> <span></span><!-- 或者一个div --> .....</div>
Pseudo-elements are closely related to a CSS property, which is the content, as the name implies, that defines the contents of pseudo-elements, such as:
#twitter:before{ display:inline; content:‘我是个伪元素‘; }
Equivalent:
<div id="twitter"> <span>我是个伪元素</span> ..... </div>
The widest range of applications is probably this:
The rest of the questions allow me to finish my meal.
==============
2. How is ' \f33f ' displayed as an icon?
For:
Here is the use of Webfont, which is a "font", this font contains vector icons, such as ' \f33f ' is the corresponding vector icon encoding.
Your code is not full, CSS should also contain this paragraph:
@font-face{Font-family:' XXX ';/* Give your custom Webfont a name */Src: URL(' Xxx.eot ');Src: URL(' Xxx.eot? #iefix ')Format(' Embedded-opentype '),url ('xxx.woff ') format(' Woff '),url(' Xxxn.ttf ') Format ('TrueType '),url(' Xxx.svg#micon ') format(' svg '); Font-weight: normal; Font-style: normal; ... }< /c15>
The advantage is that you no longer have to use CSS spirit to cut graphs, and as vectors can be displayed in any size you want, in addition, this method is very compatible (IE6 7 can be displayed, provided you have different font file formats for different browsers, such as EOT, Woff, TTF, SVG).
How do I make it? Please see the answer to @ Zhu Bo, which is very detailed and not to be mentioned.
3. Just write the icon's Unicode in HTML, and why bother adding pseudo elements: Before?
For:
From this code, do you know which icons are represented by ' \f309 ' and ' \f33f ' respectively?
Don't say you can't see it, even if Webfont's author doesn't see it, these Unicode encodings are obviously not as semantic as the HTML class or ID. If you re-use these font icons on a large website, that's pretty deadly (check it every time you use it). ), so there is a solution to the main presentation:
Html:
<i class="icon icon_open"></i>
Css:
@font-face{Font-family:' MyFont ';/* Give your custom Webfont a name */Src: URL(' Xxx.eot ');Src: URL(' Xxx.eot? #iefix ')Format(' Embedded-opentype '),Url(' Xxx.woff ')Format(' Woff '),Url(' Xxxn.ttf ')Format(' TrueType '),Url(' Xxx.svg#micon ')Format(' SVG ');Font-weight:Normal;Font-style:Normal;...}. icon{Font-family: MyFont ' speak:none/* barrier-free reading required, tell screen reader not to read this character */font-size:14px< Span class= "P"; font-variant:normalfont-weight:normaltext-transform: none}.icon_open:before{content< Span class= "o" >: "\f001" /* the corresponding icon */ /span>
Then you can simply insert the HTML in any place where you want to use the icon:
<nav> <a href="open.html"><i class="icon icon_open"></i>Open</a></nav>
Transferred from: https://www.zhihu.com/question/22022905
CSS content How do I customize the build icon?
