CSS label :before und :after

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 die nav li mit der Klasse tab-current innerhalb der tabs Klasse in html angewendet werden mit der gleichen CSS.

Beispiel:

        <div class="tabs">
            <nav>
                <ul>
                    <li class="tab-current">Hey</li>
                    <li>hello</li>
                </ul>
            </nav>
        </div>

Aber ich bin mir nicht ganz sicher, was :before und :after darstellen. Könnte jemand mir ein Beispiel? Danke

InformationsquelleAutor Liondancer | 2014-07-14
  1. 10

    Setzen Sie etwas nach und vor das element, das Sie auswählen. Zum Beispiel:

    p:after {
    content: 'hi! im after';
}

p:before {
    content: 'hi! im before';
}

    Werden Sie es besser verstehen, wenn Sie sehen,diese Geige.

    InformationsquelleAutor lante
  2. 5

    :before und :after erstellen von pseudo-Elementen, wie die 'Kinder' für das element aus, auf die Sie angewendet werden. Sie werden Häufig für bestimmte stylings, oder Fehlermeldungen.

    Fiddle: http://jsfiddle.net/XjUM8/1/

    div:before {
    content: "Before";
    background: red;
}

div:after {
    content: "After";
    background: blue;
    color: white;
}

    Sie können auch festlegen, bis zu zeigen, bis auf hover

    Fiddle : http://jsfiddle.net/XjUM8/2/

    div:hover:before {
    content: "Before";
    background: red;
}

div:hover:after {
    content: "After";
    background: blue;
    color: white;
}

    Werfen Sie auch einen Blick auf MDN :
    Vor & Nach

    InformationsquelleAutor Adjit
  3. 3

    :before und :after sind CSS-Selektoren, mit denen Sie Inhalte hinzufügen, vor oder nach dem betreffenden element. Ein Beispiel ist das hinzufügen einen Pfeil nach link, um die Fortschritte zu zeigen:

    HTML

    <div class="testAfter"><a>Arrow After this link</a></div>
<div class="testBefore"><a>Arrow Before this link</a></div>

    CSS

    .testAfter:after{
    content:"\25B6"
}
.testBefore:before{
    content:"\25C0"
}

    Geige zu zeigen:
    http://jsfiddle.net/yPkVL/1/

    Können Sie fügen Sie alle Arten von Dingen; Bilder, Texte, etc. Sie können formatieren Sie und fügen Sie verschiedene Positionierungen. Sie können alle Arten von Dingen. Es ist wie ein zusätzliches div-Element vor oder nach dem div in Frage, ohne das HTML-markup.

    Referenz:

    Vor

    Nach

    InformationsquelleAutor ntgCleaner
  4. 3

    :after und :before sind als pseudo-Elemente. Sie verwendet werden, um zu injizieren, einige Inhalte zu Ihrem DOM durch die CSS.

    Zum Beispiel, sagen Sie ein Symbol hinzufügen möchten, nachdem jeder link, der Ziele externe Webseiten (gehen wir mal davon aus, dass diese links href beginnen alle mit "http://"). Dies wäre eine echte Schmerzen im Nacken, um zu versuchen und fügen Sie diese manuell. Mit den CSS-pseudo-element :after können Sie einfach etwas wie das hier tun :

    a[href^="http://"]:after {
  content:url('href.png');
}

    und bam ! Du bist gut zu gehen.

    :after und :before erlauben, Sie einfach zu injizieren, einen text oder ein Bild, aber Sie können auch verwendet werden,in viele kreative Möglichkeiten.

    Hüten Sie sich jedoch vor, Sie kann angewendet werden, um alles außer "ersetzt Elemente" : dies bedeutet, dass Sie nicht in der Lage sein, diese zu benutzen, pseudo-Elemente (tags wie <input>, <textarea>, <object>, <img> usw.

    InformationsquelleAutor Pierre-Adrien Buisson
  5. 1

    Den W3School erklärt es ziemlich gut, hast du gelesen, dass bis und nicht etwas verstehen?

    Im wesentlichen, was es bedeutet, dass du gehst zu legen, was in den :vor Bereich vor, welche Inhalte bereits drin, und die :, nachdem der Inhalt.

    :before und :after sind Selektoren, die Sie verwendet, zu wählen, was Sie wollen Stil.

    Den Beispiel auf w3schools ist wie folgt:

    <!DOCTYPE html>
<html>
  <head>
   <style>
      p::before
      {
        content:"Read this -";
      }
    </style>
  </head>

  <body>
    <p>My name is Donald</p>
    <p>I live in Ducksburg</p>

    <p><b>Note:</b> For ::before to work in IE8, a DOCTYPE must be declared.</p>

  </body>
</html>

    Was dieser tut, ist ausdrucken:
    Read this - My name is Donald und Read this - I live in Duksburg

    Danach wird esentially das gleiche tun.

    Gibt es

    InformationsquelleAutor Anindya Basu
Schreibe einen Kommentar