CodePen Embed - CSS - pseudo elementy

Live
​x
 
<html>
  <head>
    <title>Pseudo elementy</title>
  </head>
  <style>
    p {
      border: 1px solid tomato;
      margin: 10px;
      padding: 10px;
    }
​
    /*  Umieszczmy tekst przed tagiem o klasie "przed" i style CSS,
        które mają go odpowiednio ostylować: */
    .przed::before {
      content: "Przed:";
      padding: 10px;
      color:red;
      border: 2px solid blue;
    }
​
    /*  Umieszczmy tekst za tagiem o klasie "za",
        jako tekst możemy umieścić iknkę emoji. */
    .za::after {
      content: "▶";
      padding: 0 0 0 10px;
      font-size: 2em;
      color: green;
    }
​
    /*  Nie musimy podawać wartości dla własności "content", ale nie możemy jej pominąć.
        Wstawiając pusty tekst (""), możemy dalej stylować pseudo element. */
    .bez_content::after {
      content: "";
      width: 30px;
      height: 30px;
      background: pink;
      /* Przy braku tekstu musimy podać właściwość "display" - o niej powiemy sobie w kolejnych lekcjach. */
      display: inline-block;
      margin-left: 20px;
    }
​
    /*  Grafika podana w ten sposób jest dość trudna do stylowania.
        Tutaj widzimy, że nie da zmienić się jej szerokości i wysokości. */
    .przed_i_za::before {
      content: url("https://cdn.iconscout.com/icon/free/png-256/css-2749248-2284638.png");
      width: 50px;
      height: 50px;
    }
​
    /*  Lepszym rozwiązaniem może być użycie tła dla nowego pseudo elementu.
        Stylowanie takiego elementu jest dużo łatwiejsze. */
    .przed_i_za::after {
      content: "";
      width: 50px;
      height: 50px;
      background-image: url("https://cdn.iconscout.com/icon/free/png-256/css-2749248-2284638.png");
      background-size: contain;
      display: inline-block;
    }
  </style>
  <body>
    <section>
      <p class="przed">Tekst nr 1 <i>(:before - pseudo element umieszczony przed zawartością tagu)</i></p>
      <p class="za">Tekst nr 2 <i>(:after - pseudo element umieszczony za zawartością tagu)</i></p>
      <p class="bez_content">Tekst nr 3 <i>(content = "")</i></p>
      <p class="przed_i_za">Tekst nr 4 <i>(:before + :after)</i></p>
    </section>
  </body>
</html>
​
This Pen is owned by frontstack on CodePen.
See more by @frontstack on CodePen
External CSS

This Pen doesn't use any external CSS resources.
External JavaScript

This Pen doesn't use any external JavaScript resources.