pseudo-elementele css cum ar fi: înainte

I'm confused about the pseudo-elements behaviour. I learn from w3c The :before and :after pseudo-elements

Deci, întrebarea mea este după cum urmează:

html:

<div id="breadcrumbs">this is a old content.</div>

css:

#breadcrumbs:before {
    content:"this is a new content."
}

Vreau să știu dacă noul conținut introdus în eticheta div sau în afară.

  1. <div id = "breadcrumbs"> </div> </div>

  2. acesta este un conținut nou <div id = "breadcrumbs"> acesta este un conținut vechi. </div>

Care dintre ele este corect? Mulțumesc mult anticipat!

3
Citează de la linkul tău: ar provoca o graniță solidă verde care să fie redată în jurul întregului paragraf, inclusiv șirul inițial.
adăugat autor NGLN, sursa

3 răspunsuri

This slideshow mentions this very question and is a very good bit of information in any case.

Potrivit lui Chris Coyier, ar fi primul

<div id="breadcrumbs">this is a new content.this is a old content.</div>

and here's the official documentation

2
adăugat
Mai exact : "... înainte și după conținutul arborelui de documente al unui element " Vezi și: stackoverflow.com/questions/2587669/…
adăugat autor Wesley Murch, sursa
dar am văzut blogul lui ppk despre: înainte și după: ( quirksmode.org/css/beforeafter .html ), care spune: "Acesta este un test de: înainte și după, cu care poți plasa text sau o imagine înainte și după fiecare element HTML." observați că descraptarea "înainte și după fiecare element HTML". Deci, elementul html aici este textnode-ul? sau ambalajul?
adăugat autor Jason, sursa
mulțumesc, este de mare folos
adăugat autor Jason, sursa

Conform specificațiilor w3.org:

Autori specifică stilul și locația conținutului generat cu   : înainte și după pseudoelemente. După cum indică numele lor,   : înainte și după pseudoelementele specificați locația conținutului   înainte și după conținutul arborelui de documente element . Continutul'   proprietate, coroborată cu aceste pseudo-elemente, specifică ceea ce este   inserat.

Source: http://www.w3.org/TR/CSS2/generate.html

Așa că e în interiorul etichetei de bază.

De asemenea, o puteți testa aplicând "overflow: hidden"; la eticheta de bază și la încercarea de a vă deplasa: după /: înainte de elementul din afara acestuia cu "poziție: absolută".

Cod exemplu: http://jsfiddle.net/VDBex/

Pe măsură ce sunt tăiați, presupun că sunt în interiorul etichetei de bază.

0
adăugat

CSS "conținutul" specificat este generat de browser. Similar cu gloanțele etc. Deci, răspunsul mare ar fi dacă este vorba de browser. De fapt, IE6 și IE7 (dacă nu sunt patch-uri) nu înțeleg proprietatea conținutului CSS. Cu toate acestea, IE8 și cele mai multe browsere majore fac. Știu că acest lucru nu răspunde neapărat la întrebarea dvs., dar va trebui să faceți niște experimente din partea dvs. Și nu uitați să testați alte browsere.

0
adăugat
asta e bine, mulțumesc pentru sfatul tău!
adăugat autor Jason, sursa