• Техногрет
  • Изменение текста в HTML средствами CSS

    HTML и CSSXSLTJavaScriptИзображенияСофтEtc
    Владимир Токмаков

    14 октября 2005


    Для просмотра этого примера необходим IE.

    Задача.

    Эмулировать CSS-свойство content в IE.

    Используем встроенную в IE инструкцию expression.

    Как это выглядит в браузере

    • пункт®
    • — в этом пункте уже было тире
    • но вот в таком случае — будет проблема

    01 
    02 
    03 
    04 
    05 
    06 
    07 
    08 
    09 
    10 
    11 
    12 
    13 
    14 
    15 
    16 
    17 
    <style type="text/css">
        ul.example { margin: 0.5em 0; padding: 0 0 0 2em; }
        ul.example li
        {
            margin: 0.5em 0; padding: 0 0 0 20px;
            list-style-type: none;
            behavior: expression( !this.before
                ? this.before = this.innerHTML = '&mdash;&nbsp;' + this.innerHTML : '' );
            text-indent: -1.24em;
        }
        ul.example li:before { content: '\2014\a0'; }
    </style>
    <ul class="example">
        <li>пункт<sup>&reg;</sup></li>
        <li> &mdash; в&nbsp;этом пункте уже было тире</li>
        <li><p>но вот в&nbsp;таком случае&nbsp;&mdash; будет проблема</p></li>
    </ul>