• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

[CSS] Zastosowanie After

VPS Starter Arubacloud
0 głosów
163 wizyt
pytanie zadane 10 sierpnia 2018 w HTML i CSS przez Paweł. Początkujący (380 p.)
Witam, mam problem z zastosowaniem pseudoelementu after

Obecnie to wygląda tak:

3/40/

A chciałbym, żeby wyglądał tak (Tylko nie potrafię tego zrobić)

3/40

kod https://jsfiddle.net/mz9bndxp/4/

Tak wiem, mógłbym zrobić to w HTML, tylko ze w tym kodzie/ silniku nie ma takiej możliwości
1
komentarz 10 sierpnia 2018 przez Tomek Sochacki Ekspert (227,510 p.)
Tylko jeszcze taka mała uwaga... elementy after nie są zaznaczalne, nie wystepują one w DOM więc użytkownik nie zaznaczy sobie całego ciągu 3/40 a jedynie oddzielnie 3 i 40, co wg mnie jest niezbyt dobre z punktu widzenia UX, ale to już zależy od przyjętych zasad UX w danym projekcie.

3 odpowiedzi

+1 głos
odpowiedź 10 sierpnia 2018 przez skav3n Gaduła (3,900 p.)
wybrane 10 sierpnia 2018 przez Paweł.
 
Najlepsza
li:last-child > .ipsDataItem_stats_number:after {
  content: '';
}

 

komentarz 10 sierpnia 2018 przez Paweł. Początkujący (380 p.)
li:nth-last-child(2) > .ipsDataItem_stats_number:after {
  content: '/';
}

Tak zadziałało, dzięki <3

+1 głos
odpowiedź 10 sierpnia 2018 przez Tomek Sochacki Ekspert (227,510 p.)
Coś takiego?

https://jsfiddle.net/2gLo0t13/

Ty dawałeś after na klasie, którą używałeś w 2 miejscach, ja po prostu dałem after na klasie, której używam tylko dla pierwszego elementu.
komentarz 10 sierpnia 2018 przez Paweł. Początkujący (380 p.)
Przeczytaj to co napisałem, nie mogę edytować HTML
komentarz 10 sierpnia 2018 przez Tomek Sochacki Ekspert (227,510 p.)
a to niby dlaczego..? Zawsze masz dostęp do plików źródłowych, no chyba, że korzystasz z jakiegoś beznadziejnego generatora, który uniemożliwia wejsćie w html ale to trzymałbym się od takiego czegoś z daleka...
+1 głos
odpowiedź 10 sierpnia 2018 przez Comandeer Guru (599,730 p.)

Zacznijmy od tego, że kod HTML jest niepoprawny: nie można wykorzystać dt w takim kontekście. On występuje wyłącznie wewnątrz dl.

Co więcej, całość można uprościć poprzez zręczne wykorzystanie selektora rodzeństwa i ::before zamiast ::after → https://jsfiddle.net/Comandeer/eyrwdx1a/

komentarz 10 sierpnia 2018 przez Paweł. Początkujący (380 p.)
Tak jak pisałem, nie mogę edytować kodu HTML. Twórcy silnika tak już go zrobili.

Podobne pytania

0 głosów
1 odpowiedź 258 wizyt
0 głosów
2 odpowiedzi 538 wizyt
pytanie zadane 25 grudnia 2017 w HTML i CSS przez Paweł. Początkujący (380 p.)

92,454 zapytań

141,262 odpowiedzi

319,089 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...