JSFiddle - React, Tailwind, and code Playground

by Misko Y

HTML

<!DOCTYPE html>
<html lang='sr'>
    <head>
        <meta charset='utf-8'/>
        <meta name='author' content='Милош Утвић' />
        <meta name='description' content='Објектни модел HTML-документа. DOM. Како CSS-селектори користе DOM. Псеудоелементи ::before и ::after' />
    <meta name='keywords' content='Дигитални текст 2, пример, DOM, CSS, псеудоелементи' />
        <title>DOM и псеудоелементи</title>
        <style>    

		/* Псеудоелементи */

        /* ul#andricRomani */
        ul#andricRomani li::before {
             content: open-quote;
             /* у питању је подразумевани отворени наводник који се приказује када се употреби елемент q и његов симбол зависи од језика документа, тј. вредности атрибута lang елемента html (у овом случају српски, тј. sr) */
        }

        ul#andricRomani li::after {
             content: close-quote;
        }

        /* ul#andricPripovetke */
        ul#andricPripovetke li::before {
             content: '«';
        }

        ul#andricPripovetke li::after {
             content: '» '  url('http://informatika.fil.bg.ac.rs/misko/pdf16x16.png');
             /* иза наводника користимо размак да не би симбол био слепљен уз сличицу, пробајте да изоставите размак */
        }

        /* velikani ili nezavrsenPosao */
        ul#nezavrsenPosao li::after {
             content: ',';
        }
        
        /* ul#infpredmeti */
        ul#infpredmeti {
            list-style-type: none; 
           /* морамо уклонити подразумевани симбол. изоставите ово својство да бисте видели шта се у том случају добија */
        }
        
        
        ul#infpredmeti li::before {
           content: '* '; 
           /* иза звездице наводимо размак да не би симбол био слепљен уз текст, пробајте да изоставите размак */
        }

        /* ul#bibpredmeti */
        ul#bibpredmeti li::marker {
           color: red;
           content: '*';
           /* у случају када се користи ::marker не вреди наводити размак иза...

CSS

/* Псеудоелементи */

/* ul#andricRomani */
ul#andricRomani li::before {
  content: open-quote;
  /* у питању је подразумевани отворени наводник који се приказује када се употреби елемент q и његов симбол зависи од језика документа, тј. вредности атрибута lang елемента html (у овом случају српски, тј. sr) */
}

ul#andricRomani li::after {
  content: close-quote;
}

/* ul#andricPripovetke */
ul#andricPripovetke li::before {
  content: '«';
}

ul#andricPripovetke li::after {
  content: '» '  url('http://informatika.fil.bg.ac.rs/misko/pdf16x16.png');
  /* иза наводника користимо размак да не би симбол био слепљен уз сличицу, пробајте да изоставите размак */
}

/* velikani ili nezavrsenPosao */
ul#nezavrsenPosao li::after {
  content: ',';
}

/* ul#infpredmeti */
ul#infpredmeti {
  list-style-type: none; 
  /* морамо уклонити подразумевани симбол. изоставите ово својство да бисте видели шта се у том случају добија */
}


ul#infpredmeti li::before {
  content: '* '; 
  /* иза звездице наводимо размак да не би симбол био слепљен уз текст, пробајте да изоставите размак */
}

/* ul#bibpredmeti */
ul#bibpredmeti li::marker {
  color: red;
  content: '*';
  /* у случају када се користи ::marker не вреди наводити размак иза звездице, морамо применити друго решење да не би симбол био слепљен уз текст, то остаје за неки будући пример */
}




/* украсни елементи, побољшавају читљивост текста, небитни за саму лекцију */
img#grana-A-B {float: left;}
img#DOM1 {max-width: 1000px;}
.noviPojam {font-weight: bold;}

p {
  text-align: justify;
  text-indent: 1.1cm;
}

.html-element {
  font-family: 'Courier New';
  font-weight: bold;
}
.html-atribut {
  font-family: 'Courier New';
  font-weight: bold;
}
.html-atribut-vrednost {
  font-family: 'Courier New', monospace;
  font-size: 1em;
  font-style: italic;
} 
.css-svojstvo {
  font-family: 'Courier New';
  font-weight: bold;
}
.css-fja {
  font-family: 'Courier New';
  font-weight: bold;
}
.css-vrednost  {
  font-family: 'Courier...