Pseudo-elements: before,: After example

xhtml

<strong class="amount">700</strong>

css

. Amount: Before {content: "$ ";}
. Amount: After {content: "Yuan ";}

Originally, only 700But added CSS.What will happen afterwards?

$700 USD

Thinking- ::before, ::afterUse principles of pseudo-element selectors

::ForCSS3. The standard representation of the signature element mainly refers to:OfOthers(Pseudo-classes) Partition, not the original CSSThe two are used in the same way.:Indicates that (Firefox,Opera,Safari,...) All are supported.

::beforeMatchingcontnetFeature (Property) The characters indicated in the delimiter, which can be found inSelectorsAdd the string (including spaces) to the beginning of the specified element."$ "), CSSTherefore, this string is regarded as an element, so it can be written to various design cells of the string;::afterIn the same way, the difference is to add the last. We can think of the above example as an element that adds two real instances, for example:

xhtml

<Strong class = "amount"> <span >$ </span> 700 <span> RMB </span> </strong>

Add CSS.Let's see the changes,

css

.amount {color:red;}

This will be the whole$700 USDAll are changed to tokens, because::before, ::afterAdded stringShard Element, Still due.amountThe content of the element, so it depends on the performance,Shard Element $, RMBIt is also a token. Change CSS slightlyLet's see:

css

. Amount: Before {content: "$"; color: Blue ;}
. Amount: After {content: "Yuan"; color: Blue ;}

OnlyShard ElementThe result is as follows:$700 USDThe previously defined delimiter still exists.::before,::afterThere is no limit on the two at the same time, or you can specify only one before or after.

Note that::before, ::afterCooperationcontentGeneratedShard ElementString, which indicatesLine Content Encoding Element(Inline emements), That is, the text watermark (Text-level).

Tocontent The feature also has a more useful string addition method. Since most of the compiler's support during the writing is incomplete, I will discuss it later, if you have any interest, you can explain it to W3C the content property first.

Pseudo-elements: before,: After example