[CSS] Zastosowanie After

Question

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

Comments

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.

Answer 1

li:last-child > .ipsDataItem_stats_number:after {
  content: '';
}

 

Comments

li:nth-last-child(2) > .ipsDataItem_stats_number:after {
  content: '/';
}

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

Answer 2

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.

Comments

Przeczytaj to co napisałem, nie mogę edytować HTML

---

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...

Answer 3

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/

Comments

Tak jak pisałem, nie mogę edytować kodu HTML. Twórcy silnika tak już go zrobili.