# Pseudoelementy

Pseudoelementy, w odróżnieniu od pseudoklas pozwalają nam na stylowanie części dokumentu bez uciekania się do dodawania czysto dekoracyjnych elementów HTML. Zwiększają znacznie nasze możliwości w kodowaniu ciekawych efektów zawartych w projektach stron.

```css
selektor::pseudoelement {
  właściwość: wartość;
}
```

#### Tworzenie "wirtualnych" elementów

Jednymi z najczęściej używanych pseudoelementów są `::before` oraz `::after`. Umożliwiają nam one dodanie "wirtualnej" zawartości, która nie będzie dodana do dokumentu HTML, ale będzie pełnić funkcję dekoracyjną bądź wzbogacającą zawartość tego dokumentu. Do każdego elementu HTML możemy dodać dokładnie jeden pseudoelement `::before` oraz dokładnie jeden element `::after`.

> **Important::Ważne**
>
> Istotne jest, aby wewnątrz selektora pseudoelementu (`::before` tak samo jak `::after`) znajdowała się właściwość `content` mówiąca o zawartości tekstowej pseudoelementu. Może się zdarzyć, że nie chcemy wstawiać żadnego tekstu do pseudoelementu, ponieważ jest on tam całkowicie zbędny – wtedy jako wartość właściwości `content` wystarczy podać spację lub pusty ciąg (  lub \`\`).

Powyższe pseudoelementy mogą mieć [wiele różnorodnych zastosowań](https://css-tricks.com/pseudo-element-roundup/). Poniżej prezentujemy kilka z najczęściej używanych.

Przykładowo, możemy zmienić domyślne, nudne kropki przy elementach listy na złote gwiazdki.

```markup
<ul class="stars">
  <li>Betelgeza</li>
  <li>Syriusz</li>
  <li>Gwiazda Polarna</li>
</ul>
```

```css
.stars {
  list-style-type: none;
  padding-left: 0;
}

.stars li::before {
  content: '\2605';
  color: gold;
  margin-right: 1rem;
}
```

* Betelgeza
* Syriusz
* Gwiazda Polarna

Pseudoelementy okazują się także bardzo przydatne, kiedy chcemy dodać podpowiedzi (tooltipy) w jakimś miejscu na stronie.

```markup
<a href="http://theawwwesomes.org" class="tooltip">
  The Awwwesomes
</a>
```

```css
.tooltip {
  position: relative;
}

.tooltip::before {
  content: 'Darmowe warsztaty HTML i CSS';
  position: absolute;
  left: 100%;
  top: 0;
  background: coral;
  color: white;
  width: 100%;
  padding: 0.5em;
  margin-left: 1em;
  border-radius: 5px; /* dodaje zaokrąglenia rogów */
  display: none;
}

.tooltip:hover::before {
  display: inline-block;
}
```

&#x20;[The Awwwesomes](http://theawwwesomes.org)

Przypomnijmy sobie teraz przykład z [rozdziału 14.2](https://app.gitbook.com/s/css-layout/css-floats/README.md), w którym próbowaliśmy sobie radzić z czyszczeniem opływania za pomocą dodatkowego, pustego elementu HTML. Zapowiedzieliśmy już wtedy, że można to zrobić w dużo bardziej elegancki sposób używając właśnie pseudoelementów.

Poniżej prezentujemy [micro-clearfix](http://nicolasgallagher.com/micro-clearfix-hack/)

```css
.clearfix::before,
.clearfix::after {
  content: ' ';
  display: table;
}

.clearfix::after {
  clear: both; /* Pseudoelement zamiast pustego div'a */
}
```

```markup
<div class="container clearfix">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
```

Dodanie zadeklarowanej powyżej klasy `clearfix` sprawi, że wewnątrz kontenera powstanie pseudoelement i nie będzie już potrzeby dodawania zupełnie zbędnego, pustego elementu HTML.

> **Important::Ważne**
>
> Niestety, nie jest możliwe dodanie powyższych pseudoelementów dla elementów pustych, czyli między innymi `<img>` lub `<input>.`

#### Inne pseudoelementy

Powyższe przykłady nie wyczerpują [wszystkich rodzajów selektorów pseudoelementów](https://developer.mozilla.org/en/docs/Web/CSS/Pseudo-elements).

Za pomocą pseudoelementu `::selection` możemy zmieniać kolor tła zaznaczonego tekstu (domyślnie zwykle jest to niebieski).

```css
/*
  Uwaga! Aby nasz pseudoelement
  działał prawidłowo w Firefoksie
  należy dodać przedrostek `-moz-`
*/
::-moz-selection {
  background: hotpink;
}

::selection {
  background: hotpink;
}
```

Zaznaczcie fragment poniższego akapitu i sprawdźcie sami, jak to działa:

&#x20;Readymade yuccie man bun distillery yr twee. Pitchfork etsy salvia quinoa put a bird on it synth. Mixtape craft beer semiotics vice. Chartreuse swag blog drinking vinegar blue bottle brunch meh echo park shabby chic yuccie next level. Flannel small batch semiotics selfies, gastropub forage fingerstache you probably haven't heard of them synth keytar before they sold out. Mumblecore brooklyn meggings put a bird on it, beard pabst kale chips VHS godard typewriter. Swag ethical hashtag man braid locavore small batch.

Innym ciekawym pseudoelementem jest `::first-letter`, dzięki któremu możemy uzyskać na przykład efekt znany z książek, czyli wyróżnienie pierwszej litery akapitu.

```css
::first-letter {
  font-size: 3em;
}
```

Typewriter 90's man braid, banh mi stumptown drinking vinegar XOXO sustainable pabst cronut gluten-free truffaut biodiesel. Locavore pickled freegan, plaid fingerstache bitters ramps gastropub craft beer readymade deep v cornhole aesthetic. Semiotics lo-fi affogato, microdosing single-origin coffee aesthetic tumblr lomo 3 wolf moon iPhone swag marfa pour-over vegan. Vinyl jean shorts squid, 8-bit brooklyn everyday carry viral YOLO stumptown shoreditch locavore slow-carb.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://the-awwwesomes-2.gitbook.io/tutorial-the-awwwesomes-html-and-css/the-awwwesomes-tutorial-www-beginners-12/pseudoelementy.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.