Li before: ::before (:before) — CSS | MDN

Leave a Comment / Разное / By /

Нюансы использования спецсимволов html с псевдоэлементами :before и :after

Вы здесь

Главная → Блог → CSS → Нюансы вывода спецсимволов html через псевдоэлементы CSS

Раздел: 

При наполнении ресурса контентом иногда следует обращаться к нестандартным символам и обозначениям. Одним из способов представления таких обозначений является список спецсимволов, об особенностях применения которых пойдет в этой статье.

Основы применения

Как уже было сказано, во время создания уникального контента не редко приходится использовать особые обозначения, которые соответствую какой-либо величине или понятию. Использование таких знаков в практике удобно в сочетании с псевдоэлементами, такими как :after и :before.

При помощи них мы можем задать кастомные маркеры для списков и сделать еще множество интересных вещей. Суть этого процесса заключается в том, что каждому уникальному знаку соответствует код, который выводится на страницу посредством псевдоэлементов.

Какие могут возникнуть проблемы?

При использовании описанной методики нужно учитывать два важных аспекта. Первый касается особенности работы браузера Internet Explower. Данный браузер не может преобразовывать код в символы. Решением такой проблемы может стать процесс эмуляции кода через expression. Также эмуляция для отладки работы старичка Internet Explower может осуществляться через insertAdjacentHTML.

Второй неприятный момент использования автоматически генерируемого контента заключается в том, что нельзя использовать чистый код знака во время обращения к expression.

К примеру, выставим дефис для обозначения маркеров списка. Записывая следующий код

li{
	//z-index: expression(runtimeStyle.zIndex = 1,
 this.innerHTML = "–" + this.innerHTML) /* хак для ие6 и 7 */
}
 
li:before{
	content: "–";
}

Вместо тире получим чистый код.

Почему это происходит?

Дело в том, что при использовании expression специальная символика записваывается только через цифровое обозначение или мнемоническим кодом. Однако, для свойства content необходим другой подход. Это свойство работает только с шестнадцатеричным кодом, при чем перед его значением должен обязательно стоять слеш. В противном случае комбинация кода не сработает.

Возвращаясь к нашему примеру, переводим десятеричный код тире (8211) в шестнадцатеричный (2013). По итогу получаем следующий код, который будет корректно реализовывать автоматическое генерирование кода при использовании expression.

li{
	//z-index: expression(runtimeStyle.zIndex = 1,
 this.innerHTML = "–" + this.innerHTML) /* хак для ие6 и 7 */
}
 
li:before{
	content: "\2013";
}

Советую для оптимизации работы с таким кодом найти шпаргалку с переводом десятеричной системы исчисления в шестнадцатеричную. Также в последнее время набирает популярность использование онлайн-конвертеров, что еще больше облегчает работу.

Ключевые слова: 

CSS приемы

CSS база. Или что должен знать каждый верстальщик

Уровень сложности:

Средний

Еще интересное

css — li:before{ content: «■»; } Как закодировать этот специальный символ как буллит на бланке электронной почты?

спросил

Изменено 1 год, 11 месяцев назад

Просмотрено 203 тыс.

раз

После того, как я с гордостью раскрасил свой список в стиле списка без каких-либо URL-адресов изображений или тегов span, через:

 ul{ стиль списка: нет; заполнение: 0; маржа: 0; }
li { padding-left: 1em; отступ текста: -1em; }
li:before { содержание: "■"; отступ-справа: 7px; }

Хотя эти таблицы стилей прекрасно работают вплоть до закругленных границ и прочего CSS3, и хотя получатель электронной почты (например, Eudora OSE 1) корректно отображает все стили CSS, как и в браузере, есть одна проблема: пули типа • или ■ преобразуются в &#adabacadabra;

В сообщениях электронной почты появляется, наконец, вот так:

Как мне действовать дальше?

  • css
  • список
  • кодировка символов
  • специальные символы

7

Никогда раньше не сталкивался с этой проблемой (не много работал с электронной почтой, я избегаю ее, как чумы), но вы можете попробовать объявить маркер с кодовой точкой юникода (обозначение для CSS отличается от обозначения для HTML):

содержимое: '\2022' . (вам нужно использовать шестнадцатеричное число, а не десятичное число 8226)

Тогда, если вы используете что-то, что подбирает эти символы и HTML-кодирует их в сущности (что не будет работать для строк CSS), я думаю, это будет игнорировать это.

10

Вы можете попробовать это:

 ul { list-style: none;}
ли {позиция: относительная;}
ли: до {
    положение: абсолютное;
    верх: 8px;
    поля: 8px 0 0 -12px;
    вертикальное выравнивание: посередине;
    отображение: встроенный блок;
    ширина: 4 пикселя;
    высота: 4 пикселя;
    фон: #ccc;
    содержание: "";
}

У меня сработало благодаря этому сообщению.

0

Вы столкнулись с проблемой двойного кодирования.

■ и • абсолютно эквивалентны друг другу. Оба относятся к символу Юникода «ПУЛЯ» (U+2022) и могут существовать рядом в исходном коде HTML.

Однако, если этот исходный код закодирован в HTML снова в какой-то момент, он будет содержать ■ и • . Первое отображается без изменений, второе будет выглядеть как «•». на экране.

Это правильное поведение в данных обстоятельствах. Вам нужно найти точку, где возникает лишняя вторая HTML-кодировка, и избавиться от нее.

Преобразователь Леи больше недоступен. Я только что использовал этот конвертер

Шаги:

  1. Введите десятичную версию Unicode, например 8226, в зеленом поле ввода инструмента.
  2. Нажмите Декабрьские кодовые точки
  3. См. результат в поле Unicode U+hex-нотация (например, U+2022)
  4. Используйте его в своем CSS. Например, содержимое : '\2022'

шт. У меня нет связи с веб-сайтом.

Вы не должны использовать LI в электронной почте. Они непредсказуемы для почтовых клиентов. Вместо этого вы должны закодировать каждый пункт следующим образом:

 
 Это гарантирует, что ваши пули будут работать в каждом почтовом клиенте.
 
 
 4
 Этот сайт может быть полезен,
 http://character-code.com
 
 сюда можно скопировать и поставить прямо на css html
 1
 Зарегистрируйтесь или войдите в систему 
 Зарегистрируйтесь с помощью Google
 Зарегистрироваться через Facebook
 Зарегистрируйтесь, используя адрес электронной почты и пароль
 Опубликовать как гость 
 Электронная почта
 Обязательно, но не отображается
 Опубликовать как гость 
 Электронная почта
 Требуется, но не отображается
 css — Установить стиль для li:before 
 спросил 
 Изменено
9 лет, 5 месяцев назад
 Просмотрено
6к раз
 Я добавляю символ с помощью CSS-селектора  :before  в список
 li:before {
    содержание: "■";
    размер шрифта: 10 пикселей;
    поле слева: -14px;
    отступ справа: 8px;
    украшение текста: нет !важно;
    вертикальное выравнивание: 20%;
}
 
 Я хочу подчеркнуть содержимое элемента списка, но не содержание перед ним, поэтому я добавил:
 li {
    курсор: указатель;
    оформление текста: подчеркивание;
}
 
 
 Однако часть  :before  по-прежнему подчёркивается, хотя для её  text-decoration  установлено значение  none  .
  Как подчеркнуть текст списка, но не предыдущую часть? 
 JSFIDDLE здесь: http://jsfiddle.net/fX86Q/
  Примечание: моей целью было не добавлять что-либо в html, а найти решение только для CSS. Вот почему я не выбрал @mahatmanich (очевидное) решение 
 5
 Поскольку стиль  li  всегда применяется ко всему элементу 
  •  , вам нужно использовать другой элемент html, например   , внутри 
  •   и применить
     HTML:
     < ул>
    
  • Тест
    • 
    
  • Тест
    • 

 
     CSS:
     li: перед {
    содержание: "■";
    размер шрифта: 10 пикселей;
    поле слева: -14px;
    отступ справа: 8px;
    вертикальное выравнивание: 20%;
}
ли пролет {
    курсор: указатель;
    оформление текста: подчеркивание;
}
ул, ул {
    стиль списка: нет вне никого;
}
 
      
      ОБНОВЛЕНИЕ  :
     Еще лучше без класса:
http://jsfiddle. net/fX86Q/8/
     3
     Если вы стилизуете маркеры списка, вы можете использовать это вместо  li:before 
     
      
    
    • элемент 1
      • 
    
    • пункт 2
      • 

    
ul {тип стиля списка: квадрат;}
ли {
    курсор: указатель;
    оформление текста: подчеркивание;
}
 
     Надеюсь, это тоже поможет! ссылка jsFiddle http://jsfiddle.net/xWwXq/
     3
     
     В Firefox, Chrome и Opera вы можете добавить  display: inline-block  до  li:before  (скрипка).
     ли: до {
    содержание: "■";
     дисплей : встроенный блок; 
    размер шрифта: 10 пикселей;
    поле слева: -14px;
    отступ справа: 8px;
      text-decoration: нет !important;  /* в этом больше нет необходимости */
    вертикальное выравнивание: 20%;
} 
     Однако это не будет работать в IE.
     1
     Обновить li:before часть CSS
     li:before {
    отображение: встроенный блок;
    содержание: "■";
    размер шрифта: 10 пикселей;
    поле слева: -14px;
    отступ справа: 8px;
    украшение текста: нет !важно;
    вертикальное выравнивание: 20%;
}
 
     Это решает вашу проблему.
    Добавить комментарий 
    Ваш адрес email не будет опубликован. Обязательные поля помечены *
     
     
      
      
    • 
    
    
        •
        Это первый пункт списка
    
    
    
    
        •
        Это второй пункт списка