Wyrównanie tekstu względem tła

ustawiłem image jako "kropka" w li, ale tekst równa do dołu. Podpowiecie jak to wyrównać do góry albo do środka bez dodawania dodatkowego wrapa dla samego tekstu? link do jsfidle:https://jsfiddle.net/os7L63xh/4/. Przeczytałem na necie że można to zrobić tak Before i dodaj w kontent tego ticka. Potem sobie to ladnie flexem wypozycjonujesz. No właśnie nie wiem jak to do końca zrobić ?

Taka uwaga - jak wklejasz jakiś przykład, to wklej go tak, aby działał.

W swoim CSS odwołujesz się do .edit-page, ale w HTML nigdzie tego nie widać. Czy nie zauważyłeś, że na jsfiddle tekst nie formatuje się tak, jak byś chciał (np. nie ma ramek dookoła elementów listy)?

Poprawiona wersja (aczkolwiek bez wyrównania gwiazdek w pionie) wygląda tak:

    li {
        font-size: 1.6rem;
        color: blue;
        outline: 1px solid red;
        margin-bottom: 20px;
    }

Tutaj masz wersję działającą - https://jsfiddle.net/71phorq5/

Zobacz, czy o takie coś Ci chodziło, a jeśli nie, to napisz jaśniej, czego potrzebujesz do szczęścia ;)

Sugeruję wyłączyć standardowe wypunktowania, które są w ogólności mało konfigurowalne:

UL {list-style:none;}

I przypisać background do LI

LI {
  background-image: url('http://mgame3s.wap.sh/icon/icon.png');
  background-repeat:no-repeat;
  background-position:left center;
  padding-left:20px;
}

Pseudoelementem też można zrobić, ale to bardziej upierdliwe.

No i spoko. Jak zwykle dziękuje wszystkim za czynny udział w debacie. Wasza pomoc znowu okazała się dla mnie bardzo owocna. Dzięki wielkie