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

Ozdobnik img na początku zdania

Object Storage Arubacloud
+1 głos
145 wizyt
pytanie zadane 6 stycznia 2022 w HTML i CSS przez Bzytek Użytkownik (810 p.)

Witam wszystkich w 2022
Próbuję ogarnąć trochę kod na mojej stronie związany z wyświetlaniem obrazkowego ozdobnika na początku zdania.
Udało? mi się wymodzić taki kod (czy może być bez ::after ? ) :

.arobase::before {content: url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Blue_crocheting_thread.jpg/30px-Blue_crocheting_thread.jpg");
}

w treści wstawiam taki span

<p><span class="arobase"></span>Lorem ipsum dolor sit amet consectetuerLorem ipsum dolor sit amet consectetuer
<br />
<span class="arobase"></span> Lorem ipsum dolor sit amet consectetuerLorem ipsum dolor sit amet consectetuer ipsum dolor sit amet consectetuerLorem</p>

Chciałbym zasięgnąć waszej opinii - czy to jest poprawne rozwiązanie? Bo jak na to co chciałem osiągnąć - działa.

Pozdrawiam

2 odpowiedzi

0 głosów
odpowiedź 6 stycznia 2022 przez VBService Ekspert (254,630 p.)
wybrane 16 stycznia 2022 przez Bzytek
 
Najlepsza

W tym przypadku czy ::before czy ::after nie robi różnicy bo tag

<span class="arobase"></span>

znajduje się przed tekstem.

 

<p>
  <span class="one"></span>Lorem ipsum dolor sit amet consectetuerLorem ipsum dolor sit amet consectetuer
  <br />
  <span class="two"></span>Lorem ipsum dolor sit amet consectetuerLorem ipsum dolor sit amet consectetuer
  <br />
  <span class="three"></span>Lorem ipsum dolor sit amet consectetuerLorem ipsum dolor sit amet consectetuer  
</p>
p span {
  margin-right: 0.5em;
}
.one::before {
  content: url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Blue_crocheting_thread.jpg/30px-Blue_crocheting_thread.jpg");  
}
.two::after {
  content: url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Blue_crocheting_thread.jpg/30px-Blue_crocheting_thread.jpg");
}
.three {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Blue_crocheting_thread.jpg/30px-Blue_crocheting_thread.jpg");
}

 

+1 głos
odpowiedź 6 stycznia 2022 przez Comandeer Guru (602,560 p.)

Tak, jest to poprawne.

Mam jedynie taką wątpliwość, czy nie chcesz przypadkiem zrobić list? Jeśli tak, to jest coś takiego jak list-style-image.

Podobne pytania

0 głosów
1 odpowiedź 225 wizyt
pytanie zadane 7 października 2019 w HTML i CSS przez R.orlinski Mądrala (5,490 p.)
0 głosów
1 odpowiedź 410 wizyt
pytanie zadane 12 lipca 2018 w HTML i CSS przez ovy Nowicjusz (180 p.)
0 głosów
1 odpowiedź 314 wizyt
pytanie zadane 23 lipca 2016 w HTML i CSS przez NTXFN Gaduła (3,430 p.)

92,695 zapytań

141,606 odpowiedzi

320,106 komentarzy

62,052 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

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!

...