Articles of pseudo elemento

:: prima dell’emissione dell’ordine di impilamento pseudo-elemento

Quando sono posizionati staticamente, lo stack pseudo-elemento :: before (z-index) prima del contenuto del bambino, ma dopo lo sfondo del figlio. Qualcuno può spiegare perché o anche come sta accadendo o se questo è un problema che hanno tutti i principali browser? div { background-color:yellow; width:400px; } div::before { background-color:red; content:”div::before”; } div::after { background-color:green; […]

Come posso rendere selezionabile il contenuto generato?

Posso fare in modo che CSS visualizzi l’ID di un elemento utilizzando il contenuto generato, come questo: h2:hover:after { color: grey; content: “#” attr(id); float: right; font-size: smaller; font-weight: normal; } My ID Pellentesque habitant morbi tristique senectus et netus et. Come posso rendere selezionabile il contenuto generato (“# my-id”) in modo che l’utente possa […]

CSS: prima su SVG in linea

Aggiornare Grazie per aver segnalato la relazione tra il contenuto generato e gli elementi sostituiti. Ho trovato questo articolo che tratta proprio questo argomento: http://red-team-design.com/css-generated-content-replaced-elements/ È interessante notare che un documento del W3C intitolato “Modulo CSS3 generato e sostituito” (da 11 anni!) Definisce lo pseudo-elemento :outside , che potrebbe offrire una soluzione per utilizzare il […]

Elementi pseudo CSS in React

Sto costruendo componenti React . Ho aggiunto CSS in linea nei componenti come suggerito in questa brillante presentazione di uno dei ragazzi di React. Ho cercato tutta la notte di trovare un modo per aggiungere le pseudo classi CSS in linea, come nella diapositiva intitolata “:: after” nella presentazione. Purtroppo, non ho solo bisogno di […]

“Testo-decorazione” e lo “pseudo-elemento”: dopo “, rivisitato

Sto ri-chiedendo questa domanda perché le sue risposte non hanno funzionato nel mio caso. Nel mio foglio di stile per i media stampati voglio aggiungere l’url dopo ogni link usando la pseudo-class :after . a:after { content: ” “; text-decoration: none; color: #000000; } In Firefox (e probabilmente Chrome ma non IE8), la text-decoration: none […]

Posso cambiare l’altezza di un’immagine in CSS: prima /: dopo pseudo-elementi?

Supponiamo di voler decorare i collegamenti a determinati tipi di file usando un’immagine. Potrei dichiarare i miei collegamenti come A File! quindi avere CSS come .pdflink:after { content: url(‘/images/pdf.png’) } Ora, funziona alla grande, tranne se pdf.png non è la dimensione giusta per il mio testo del link. Mi piacerebbe poter dire al browser di […]

Come posso accedere alle proprietà di stile degli pseudo-elementi con jQuery?

Per il contesto, questo è il seguito di una domanda precedente . Piuttosto che scavare attraverso cssRules , mi piacerebbe basare la logica sui selettori jQuery che cercano gli effetti di quelle regole. Date le proprietà predefinite di .commentarea .author:before { background-image: url(http://…); background-position: -9999px -9999px; /* … */ } che sono modificati selettivamente come […]

Perché no: prima e: dopo che gli pseudo elementi funzionano con gli elementi `img`?

Sto cercando di usare a :before pseudo element con un elemento img . Considera questo HTML e CSS … HTML CSS img:before { content: “hello”; } jsFiddle . Questo non produce l’effetto desiderato (testato in Chrome 13 e Firefox 6). Tuttavia, funziona con un elemento div o span . Perchè no? C’è un modo per […]

Qual è la differenza tra una pseudo-class e uno pseudo-elemento nei CSS?

Cose come a:link o div::after … Le informazioni sulla differenza sembrano scarse.

Perché gli pseudo-elementi: before e: after richiedono una proprietà ‘content’?

Dato il seguente scenario, perché il selettore: after richiede una proprietà content per funzionare? .test { width: 20px; height: 20px; background: blue; position:relative; } .test:after { width: 20px; height: 20px; background: red; display: block; position: absolute; top: 0px; left: 20px; } Si noti come non si vede lo pseudo elemento fino a quando non si […]