Tag: pseudo-element
Das pseudo-element von CSS ermöglicht eine verbesserte Anzeige von Inhalt in Elementen oder die Fähigkeit zur Generierung von extra-Anfang oder Ende-Inhalte für Elemente.
verhindern, dass ein pseudo-element auslösen schweben?
1 Antworten
Wenn ich markup: <div class="a b"></div> wo .eine Klasse hat eine hover-Klasse zugeordnet und die .b-Klasse hat ein pseudo-element zugeordnet... wie so: div { width: 100px; height: 100px; } .a { background: red; display: inline-block; } .a:hover
Setzen Sie title/alt-Attribute in CSS :after { content: Bild }?
3 Antworten
Habe ich Folgendes CSS hinzufügen ein PDF-Symbol, um einen beliebigen link, die links zu einer PDF-Datei: a.pdf-link:after { padding-left: 2px; content: url(../images/icon-pdf-link.gif);} Ist es möglich, einige Titel und alt-Attribute auf diesem Bild? Ich würde es gerne so,
Div mit CSS-Inhalt, nach dem pseudo-element ist nicht sichtbar
4 Antworten
Ich habe eine POC, die ich absolvieren muss und ich darf mit Hilfe von CSS update Stile eines Produkts. Ich ersetzt mit einem Bild von dem Produkt mit einem logo mit dem CSS-Attribut content. Muss ich hinzufügen,
CSS ::before pseudo-element line-height?
3 Antworten
Mein Absatz hat eine Höhe/Zeile-Höhe von 50px und text-align: center, die zentriert den text. Aber p:bevor es verursacht wird, zu erhöhen, in die Höhe/Zeile-Höhe, wodurch der text zu stoßen, nach unten. Ich will beide, p und p:bevor
Anwendung text-decoration css generated content im IE
6 Antworten
Es scheint also die nicht-Pflege für text-decoration: none; definiert a:before pseudo-element (oder pseudo-Klasse). Hier ist ein JS-Fiddle: http://jsfiddle.net/9N35f/ Ich würde erwarten, dass die ">" zu verlieren, die unterstreichen. Es funktioniert in FF, Chrome und Safari, aber nicht
Welche Elemente unterstützen den ::before und ::after pseudo-Elemente?
3 Antworten
Ich versuche zu kommen mit einigen gute Standard-styling für <input>s in HTML5 und versucht, die folgenden: input::after { display: inline; } input:valid::after { content: ' ✓ '; color: #ddf0dd; } input:invalid::after { content: ' ✗ '; color:
Kann ich ein Ziel :vor-oder :after-pseudo-element mit einem sibling combinator?
2 Antworten
Gibt es einen Grund, warum das CSS nicht funktioniert? http://jsfiddle.net/6v5BZ/ a[href^="http"]:after { content:""; width:10px; height:10px; display:inline-block; background-color:red; } a[href^="http"] img ~ :after { display:none; } .. auf dieser HTML-Seite? <a href="http://google.com">Test</a> <a href="http://google.com"> <img src="https://www.google.com/logos/classicplus.png"> </a> Die
Wie zu animieren :bevor Sie mit jQuery-Selektor
1 Antworten
Habe ich einige element mit :vor dem pseudo-Selektor definieren. Ich muss hinzufügen, einige übergangs -, Animations-für die es aber in CSS ist es nicht möglich. Also ich denke, ich kann dies mit jQuery-aber etwas ist noch richtig
Warum ist das CSS:before-Anweisung funktioniert nicht im IE 8, IE9?
2 Antworten
Mit ein :bevor der CSS, um ein Bild/icon hier (siehe Kreis im Bild unten), aber im Internet explorer 8+, es wird nur nicht angezeigt. Dies ist die Seite: http://www.websiteprofessioneel.nl Link Bild unten zeigt rechts element (es ist
Wie füge hinzu ::nachdem in den HTML-link-tag
2 Antworten
Gibt es einen CSS-Effekt für die ::after element. Zum Beispiel: .wrapper a:hover:after, footer.main-footer a:hover:after { background:#ff0000; } Und in der Chrome-Entwickler-Konsole, ich merke, dass es einige link-tag hat ::after im inneren, wird zeigen, dass die Wirkung <a
So fügen Sie eine Grenze, um nur den Prozentsatz der Breite des Elements, CSS-Trick
2 Antworten
Die Frage... Wieder einmal bin ich auf der Suche für einen coolen CSS-trick, um mir zu helfen, um die Wirkung erzielen, ohne dass die Verwendung von unsauberen HTML... Folgende Bild zeigt, was ich versuche zu erreichen, beachten
Bearbeiten input type="search" Pseudo-element-Schaltfläche ('x')
3 Antworten
Ich versuche, um eine Suche bar, die schön Aussehen. Was ich getan habe ist, ich habe ein Bild von einem search bar und mit dem ich bin hinzufügen, das Bild auf der Rückseite-Boden des Eingangs-und ich bin
Pseudo-element :hover auf ::vor
2 Antworten
Ich bin auf der Suche hinzufügen, einen kleinen Kreis zu einem Pseudo-element, mit :hover but meine das erwartete Ergebnis ist für den Kreis zu erscheinen ::before ohne den text selbst. Ich bin auf der Suche, um diese
CSS ::Bevor Sie auf die Zelle in der Tabelle
1 Antworten
Möchte ich hinzufügen, dass ein ::before - Wahlschalter auf einige Zellen der Tabelle, was eine position:absolute , aber es funktioniert nicht: CSS: table{ border:1px solid #ccc; padding:10px; } table td{ border:1px solid #ccc; padding:5px; } .useBefore::before{ content:'before';
Pseudo-Elemente nicht angezeigt
3 Antworten
Pseudo-Elemente nicht zeigen, auf div. Ich bin mit einem sprite-image, aber ich habe versucht, eine nicht-sprite-image, doch nichts. Ich habe versucht mehrere Strategien, wie absolute Positionierung, mit z-index, Ränder, etc. Ich scheinen, es zu tun korrekt, wenn
CSS :bevor auf inline-SVG
1 Antworten
Update Dank porneL für den Hinweis auf das Verhältnis zwischen den generierten Inhalt und ersetzt Elemente. Ich fand diesen Artikel, die sich mit genau diesem Thema: http://red-team-design.com/css-generated-content-replaced-elements/ Interessant genug, eine W3C-Dokument mit dem Titel "CSS3 Generiert und
Wie position :vor & :after pseudo-Elemente übereinander?
2 Antworten
Was ist der beste Weg, um die position eines pseudo-element direkt auf ein anderes pseudo-element? Sagen wir, ich will, um ein schickes "checkbox" erscheint neben dem label hier: CSS: label:before { content: "\00a0"; color: #FFF; height: 6px;
Wie würde ich wählen Sie das erste Bild in diesem div mit jquery?
3 Antworten
Habe ich dieses div mit ein paar anderen divs und Bilder. Das Haupt-div ist m-carousel-inner. Was ich tun möchte, ist wählen Sie das erste img-element in diesem div. Wie würde ich gehen über das tun dies in
Wie verwende ich die icons von Anwohner Manfred Meier in meinem css?
1 Antworten
Habe ich mit entypo (heruntergeladen von entypo.com), und die Anzeige der Symbole wie folgt: .icon:before { display: inline-block; font-family: 'Entypo'; text-decoration: none; speak: none; } .email:before { content: "\2709"; } Ziemlich standard. Aber da die hinting deaktiviert
css :hover pseudo-Klasse nicht funktioniert
2 Antworten
Habe ich eine CSS - :hover pseudo-Klasse, die nicht produzieren keine Ergebnisse. Ich war Herumspielen mit einigen image-gallery-code, und ich habe es geschafft, dieses snippet, das funktioniert nicht. Ich kann nicht herausfinden, warum. Einige der seltsameren CSS-Regeln
Wie entfernen, nur Unterstrichen von einem:vor?
6 Antworten
Habe ich eine Reihe von style-links mit den :before anwenden ein Pfeil. Es sieht gut aus in alle browser, aber wenn ich die Unterstreichung für den link, ich nicht wollen, zu unterstreichen, auf die :before Teil (Pfeil).
Font Awesome 5, warum css-Inhalt wird nicht angezeigt?
3 Antworten
Ich versuche, mit FontAwesome in den Inhalt der css. Scheint es mit dem code für das Symbol anstelle des symbols. Ich habe in der online-Hilfe, aber es funktioniert immer noch nicht css @font-face { font-family: 'FontAwesome'; src:
CSS label :before und :after
5 Antworten
Ich Lerne CSS, und ich bin mit ein wenig Schwierigkeiten zu erkennen, - Eigenschaften und-Verständnis einiger der syntax. in der CSS unter. .tabs nav li.tab-current:before, .tabs nav li.tab-current:after { } Ich verstehe, dass tabs ist Klasse und
CSS : Styling den Inhalt vor pseudo-element auf einer Liste
2 Antworten
Ich versuche, den Stil in einer geordneten Liste (kein Punkt, ein border mit radius und drehen 45°) <div class="test"> <ol> <li><span>it's a test</span></li> <li><span>and again</span></li> </ol> </div> Und css - .test ol { counter-reset: li; list-style-type: none;
CSS :not(:last-child):after-Selektor
7 Antworten
Habe ich eine Liste von Elementen, die im Stil wie diese: CSS: ul { list-style-type: none; text-align: center; } li { display: inline; } li:not(:last-child):after { content:' |'; } HTML: <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul>
Hinzufügen von box-shadow zu einem :after-pseudo-element
4 Antworten
Habe ich ein div namens .testimonial-inner und mit der :after pseudo-element habe ich ein Pfeil, der sich unterhalb es nach unten zeigt. Das problem das ich habe ist das hinzufügen eines box-shadow um alles, damit Sie sehen
css - hintergrund-Bild und nicht-Symbol-schriftart
4 Antworten
So, jetzt meine Schaltfläche icon-font verwendet. Ich möchte zu entfernen-Symbol-schriftart, die Verwendung von image-statt. Dies ist, wie mein code aussieht .zocial::before { content: ""; /* some code goes here */ } .zocial.plus::before { content: "p"; } Habe
Probleme mit :before und :after in Internet Explorer 10
1 Antworten
Diesem Grunde fügt zwei Zeilen vor und nach dem h1-element, so wie hier: Die Linie ist nur eine Hintergrundfarbe mit einer Höhe von 1px. ------------------------ Text ------------------------ Getestet habe ich diese in Chrome und Firefox und alles
Ändern Stil von pseudo-Elementen in angular2
2 Antworten
Ist es möglich, zu ändern Stil von pseudo-Elemente mit [style] oder [ngStyle] im angular2? um einen Unschärfe-Effekt auf einem div-Element wirkt wie ein overlay, und ich sollte die background-image auf pseudo-element. Habe ich versucht, etwas wie <div
Die Auswahl und Manipulation von CSS-pseudo-Elemente wie ::before und ::after mit Hilfe von jQuery
16 Antworten
Gibt es eine Möglichkeit zum auswählen/Bearbeiten von CSS-pseudo-Elemente wie ::before und ::after (die alte version mit einem semi-colon) mit Hilfe von jQuery? Beispielsweise mein stylesheet hat die folgende Regel: .span::after{ content:'foo' } Wie kann ich das ändern
Ändern von CSS-pseudo-element-styles per JavaScript
6 Antworten
Ist es möglich, um einen CSS pseudo-element style über JavaScript? Zum Beispiel, ich will dynamisch die Farbe von der scrollbar so wie hier: document.querySelector("#editor::-webkit-scrollbar-thumb:vertical").style.background = localStorage.getItem("Color"); und ich möchte auch sagen zu können, dass die scrollbar zu
CSS3 ::Auswahl verhält sich anders als in FF & Chrome
1 Antworten
Ich experimentiere mit der ::selection pseudo-element in CSS3. In Firefox funktioniert es und sieht toll aus. Meine Website hat ein dunkles Marine-blau-hintergrund. Ich die Auswahl, so dass es aussieht wie diese in der FF. Aber in chrome
Kann ich mit einer vor oder :after-pseudo-element ein input-Feld?
16 Antworten
Ich versuche, mit der :after CSS-pseudo-element auf einer input Feld, aber es funktioniert nicht. Wenn ich es mit einem span, funktioniert es. <style type="text/css"> .mystyle:after {content:url(smiley.gif);} .mystyle {color:red;} </style> Diese arbeiten (bringt auch der smiley nach "buu!"
Warum ist es nicht möglich zu kombinieren, Hersteller-spezifische pseudo-Elemente/Klassen in einem Regel-set?
2 Antworten
In CSS ist es möglich, Stil placeholder text in ein input unter der Verwendung einer Kombination von vendor-spezifischen pseudo-Klassen und pseudo-Elemente (die zu Holen Sie sich die besten cross-browser-Abdeckung). Diese, Sie alle teilen die gleichen grundlegenden Eigenschaften
CSS angeben pseudo-element :nach Eingang
1 Antworten
Habe ich html-code, den ich nicht ändern kann. Ich kann JS für die Hilfe. So dass die einzige option ist CSS. Beispiel hier: http://jsfiddle.net/4gKPL/ HTML: <!-- code for input --> <div class="form-group complete"> <label>label for text input</label>
&::before Pseudo-element nicht korrekt ausgerichtet - CSS(3) - Box-Modell - WENIGER
1 Antworten
Ich versuche, fügen Sie ein Bild mit der &::before pseudo-element und platzieren Sie es auf der Oberseite des Eltern-Elements durch die Anpassung der padding/margin. Ich habe nicht in der Lage, die img "on top" des Eltern-Elements. Es
Extrahieren von Inhalt in :nach der Verwendung von XPath
1 Antworten
Ich versuche, den Wert einer CSS-Attribut "Inhalt" mit: WebElement plusOrMinusSign = currentEntityTypeLevel1.findElement( By.xpath("i[@class='tree-branch-head']::after")); System.out.println(plusOrMinusSign.getCssValue("content")); Jedoch bekomme ich eine Fehlermeldung: The string 'i[@class='tree-branch-head']::after' is not a valid XPath expression. Scheint es die "::after" ist nicht anerkannt. Html: <i
Pseudo-element :hover ::before
2 Antworten
Ich bin auf der Suche hinzufügen, einen kleinen Kreis zu einem Pseudo-element, mit :hover but meine das erwartete Ergebnis ist für den Kreis zu erscheinen ::before ohne den text selbst. Ich bin auf der Suche, um diese
CSS active-Selektor mit after pseudo-element
1 Antworten
Ich habe ein problem, zu erreichen, die auf aktiven Symbol-Selektor auf nach pseudo-Selektor. Unten ist die code bin versucht. <html> <head> <style type="text/css"> .btn{ width:25%; } .name{ background: #fff; color: #000; text-align: center; height: 35px; line-height: 35px;
Entfernen ::before oder ::after pseudo-element-CSS-definition
3 Antworten
Einige hintergrund Bin ich Formulare angezeigt werden in meiner Anwendung, und ich lege jedes Feld (oder eine zugehörige Gruppe von Ihnen) in einer UL/LI element. Dies ist ein Beispiel: <ul class="form"> <li class="required"> <label for="...">Field label</label> <div
Sich wiederholende Bilder mit der :after pseudo-Elemente
4 Antworten
Ich würde gerne die Schlagzeilen in meiner Seite wie diese: http://cl.ly/0m3F0j392e0G1n0s0T34 Was würde ich am Liebsten zu tun ist, verwenden Sie text für die Schlagzeile, und dann haben Sie eine 10px durch 10px gif repeat horizontal nach.
Pseudo-Elemente auf den Tischen?
4 Antworten
Ich bin versucht, ein pseudo-element ein <tr> aber stellt sich heraus, dass es nicht so funktioniert wie erwartet. Ich bin mir nicht sicher, ob ich bin etwas fehlt oder wenn es einfach nicht möglich. Hier ein jsfiddle
Warum content span:after {content: ''} ist in Spannweite und nicht nach?
3 Antworten
Warum dieser CSS ... .sticky-info span:after {content: 'test';} ... Ergebnisse ... <div class="sticky-info"><span>Price <strong>€120</strong>::after</span> Ist es ein Weg, um die content:'test' hinter jedem </span> innen <div class="sticky-info"> Es gibt mehrere Spannweiten innerhalb <div class="sticky-info"> so u ersetzen
pseudo-Elemente am Eingang.senden
1 Antworten
Ich verfolgt habe, ganz eng, einige Techniken für die Herstellung von kleinen CSS-Dreiecke mit pseudo-Elementen. Habe ich mich beworben, diese erfolgreich zu den Titeln (und links - Ansicht hier; http://culturecuts.co.uk), aber als ich dann versuchte, das gleiche
Show :nach wenn die Maus über das übergeordnete element via CSS
2 Antworten
Ist es möglich display:block; die :after pseudo-element, wenn ich den Mauszeiger über das übergeordnete element selbst? #myDiv{ position:relative; width:50px; height:50px; border-style:solid; background-color:red; } #myDiv:after{ position:absolute; content:""; display:none; width:50px; height:50px; border-style:solid; background-color:blue; } Ich müde: #myDiv:hover #myDiv:after{ display:block;
Farbige Punkte :before und :after h2
2 Antworten
Ich versuche mit farbigen Punkten vor und nach h2. Dies ist mein CSS; h2:after { width:10px; height:10px; border-radius:50%; background: #b83b3b; } h2:after { width:10px; height:10px; border-radius:50%; background: #b83b3b; } Aber keine Punkte zeigen. Führt? Dank! Jaeeun Welche
WebDriver select-element ::before
2 Antworten
Habe ich 2 Elemente, die die gleichen Attribute haben aber gezeigt ein zu einer Zeit auf die Seite (Wenn einer angezeigt wird, der andere verschwindet).Der einzige Unterschied zwischen den beiden ist, dass das element, das angezeigt wird,
Wie kann ich mit css pseudo element": checked arbeiten im IE7 + IE8?
1 Antworten
Ich versuche zu stylen ausgewählten radio-buttons anders als die nicht-ausgewählten radio-butons im IE 7+8. Ich habe versucht selectivizer und das problem behoben, sondern schuf auch andere Probleme mit css hintergrund-Bilder, die als ausgeblendet eingestellt. Weiß jemand von
Vor und nach dem pseudo-Elemente auf hintergrund Bild
1 Antworten
Ich bin zu wollen, konstruieren Navigations-Elemente aus drei (hintergrund -) Bilder, mit der ersten und der letzten eine Feste Breite, und die zentrale eine variable Breite, je nach der Breite des Textes in der nav-Element. Ich geführt
Stellen Sie CSS-pseudoelement :before gleiche Höhe wie die Haupt-element
2 Antworten
Ich habe auf der Suche alle über und konnte eine Lösung finden, um diese auf meinem eigenen. Ich bin versucht, eine grundlegende contenteditable-code-editor, und für die Zeilennummern habe ich gewählt, um ein Absatz für jede Zeile mit