CSS Lastnost: text-emphasis

Lastnost text-emphasis se uporablja za uporabo poudarkov (ang. Emphasis) v besedilu in je okrajšava za text-emphasis-style in text-emphasis-color lastnosti. Velikost poudarkov je približno 50% velikosti pisave.
PRIMER
<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>CSS Text Emphasis - Poudarki besedila</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>
        * {
            box-sizing: border-box;
        }
        body {
            margin: 0;
            padding: 30px;
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 100%;
            margin: 0 auto;
            background: white;
            color: #333333;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .example-group {
            margin: 20px 0;
            padding: 15px;
            border-left: 4px solid #2196F3;
        }
        .no-border {
            border: none;
        }
        .opis {
            color: #333333;
            font-size: 1.2em;
            margin-bottom: 10px;
            font-style: italic;
        }
        p.demo-text {
            font-size: 24px;
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
        }
        
        /* primeri text-emphasis */
        .shapes .demo-text {
            margin-bottom: 20px;
        }
        .trikotnik {
            text-emphasis: trikotnik darkgreen;
        }
        .sesame {
            text-emphasis: darkorange sesame;
        }
        .filled {
            text-emphasis: darkkhaki filled;
        }
        .double-circle {
            text-emphasis: double-circle blue;
        }
        .dot {
            text-emphasis: dot red;
        }
        .open {
            text-emphasis: open darkseagreen;
        }
        .circle {
            text-emphasis: circle deepskyblue;
        }
        .none {
            text-emphasis: deeppink none;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>CSS Text Emphasis</h1>
        <p class="opis">Lastnost text-emphasis omogoča dodajanje posebnih poudarkov nad besedilom v različnih oblikah 
        in barvah.</p>

        <div class="example-group shapes">
            <h3>Oblike poudarkov (Emphasis Shapes)</h3>
            
            <p class="demo-text trikotnik">
                Trikotni poudarki v temno zeleni barvi
                <br><code>text-emphasis: trikotnik darkgreen;</code>
            </p>

            <p class="demo-text sesame">
                Sezamovi poudarki v temno oranžni barvi
                <br><code>text-emphasis: darkorange sesame;</code>
            </p>

            <p class="demo-text filled">
                Polni poudarki v temno khaki barvi
                <br><code>text-emphasis: darkkhaki filled;</code>
            </p>

            <p class="demo-text double-circle">
                Dvojni krožni poudarki v modri barvi
                <br><code>text-emphasis: double-circle blue;</code>
            </p>

            <p class="demo-text dot">
                Pikčasti poudarki v rdeči barvi
                <br><code>text-emphasis: dot red;</code>
            </p>

            <p class="demo-text open">
                Odprti poudarki v temno morsko zeleni barvi
                <br><code>text-emphasis: open darkseagreen;</code>
            </p>

            <p class="demo-text circle">
                Krožni poudarki v globoki nebesno modri barvi
                <br><code>text-emphasis: circle deepskyblue;</code>
            </p>

            <p class="demo-text none">
                Brez poudarkov (samo za primerjavo)
                <br><code>text-emphasis: deeppink none;</code>
            </p>
        </div>

        <div class="example-group no-border">
            <h3>Opombe</h3>
            <ul>
                <li>Poudarki se prikažejo nad besedilom v pisavah, ki to podpirajo</li>
                <li>Možne so različne kombinacije oblik in barv</li>
                <li>Lastnost je posebej uporabna pri vzhodnjaških pisavah</li>
                <li>Podporo v brskalnikih je potrebno preveriti</li>
            </ul>
        </div>
    </div>
</body>
</html>
REZULTAT