CSS: перед надстрочным индексом 6?

Есть ли способ добавить верхний индекс «6» в свойство CSS «content» для псевдоэлемента? Я обыскал всю сеть, пробовал разные строки Unicode и коды глифов, чтобы попытаться заставить это работать, но не нашел решения.

Спасибо!

РЕДАКТИРОВАТЬ: Извините за то, что не поясняю ... Мне нужно поместить верхний индекс «6» среди другого текста в том же свойстве «content». Похоже, мне нужно просто определить другую кодировку для моего CSS и вставить ее как буквальный символ.


css unicode pseudo-element css-content
person wdews    schedule 13.11.2013    source источник

Ответы (2)


arrow_upward
3
arrow_downward

На самом деле очевидный способ работает:

span:before {
    content: "⁶";
}

Однако вам, возможно, придется быть осторожным с используемыми и указанными кодировками в этом случае.

Как упоминает BoltClock, вы также можете экранировать символ как \2076, если проблемы с кодировкой вызывают беспокойство (например, если ваш сервер использует устаревшие кодовые страницы, и вы не можете это изменить).

person Joey    schedule 13.11.2013
comment
Это похоже на то, что изначально было у пользователя, но согласны ли вы, что метод CSS для изменения font-size / v-align лучше? - person Gray; 13.11.2013
comment
В конечном итоге я ищу возможность добавить это в свойство содержимого среди другого текста, например, content: 'This is 10⁶'. - person wdews; 13.11.2013
comment
@Gray - Это зависит от обстоятельств. Если пользователю нужен дополнительный текст, которого нет в суперсценарии, это единственный вариант. - person Kobi; 13.11.2013
comment
Кодовая точка для этого символа - U + 2076; чтобы выразить это как escape-последовательность, вы должны использовать \2076. Конечно, если ваш документ закодирован в UTF-8, вы можете просто использовать символ напрямую. - person BoltClock; 13.11.2013
comment
Мне удобнее использовать ваше предложение \ 2076. Это именно то, что я искал. Спасибо, @BoltClock. - person wdews; 13.11.2013
comment
Как был написан верхний индекс 6? Я могу скопировать это, но не знаю, как воссоздать. Можно ли так сделать любой чуг? Может #? - person Andre Bulatov; 12.10.2015
comment
@AndreBulatov: Карта персонажей, скопируйте оттуда. И да, любой символ можно скопировать откуда-нибудь, откуда вы можете его скопировать. - person Joey; 13.10.2015
comment
@Joey - Спасибо. Я надеялся, что вы скажете, что создали его каким-то образом в Word или что-то в этом роде (что не работает для меня; вставляет обычный символ). Когда я использую программу просмотра символов OSx, я не могу найти ни 6, что вы использовали, ни надстрочный хеш, который я плохо ищу для использования в псевдоконтенте CSS. Есть идеи, где я могу найти один из них? Это кажется неправильным, и если я найду это, я скопирую / вставлю его везде и никогда не отпущу. - person Andre Bulatov; 13.10.2015
comment
@Andre: никогда не использовал OS X, но он должен быть в блоке Unicode Верхние и нижние индексы (по довольно очевидным причинам). Похоже, что в Юникоде вообще нет знака надстрочного числа, поэтому вы не можете использовать этот метод здесь. Ответ SW4 должен работать для произвольного содержания. - person Joey; 13.10.2015
comment
@Joey - Да, программа просмотра символов OSx уникальна ... много смайликов, маленьких зданий, флагов и больших пальцев вверх !, но без юникода. Приветствую, но ответ SW4 не сработает для меня, поскольку я пытаюсь сделать :after {content: "#1";}, а я уже использую предыдущий для значок трофея, который является фоном для #1. - person Andre Bulatov; 13.10.2015

arrow_upward
4
arrow_downward

Есть другое решение, как в этой скрипке

element:before{
    content:'6'; 
    vertical-align: super; /* make superscript */
    font-size:8px;
}
person SW4    schedule 13.11.2013
comment
В чем разница между super и top? - person Gray; 13.11.2013
comment
Согласно MDN (developer.mozilla.org/en-US/ docs / Web / CSS / vertical-align): super: выравнивает базовую линию элемента с базовым индексом его родительского элемента. top: совместите верх элемента и его потомков с верхом всей строки. Super специально для надстрочного индекса. - person SW4; 13.11.2013
comment
font-size: 1ex, вероятно, лучше, чем размер в пикселях. - person Joey; 13.11.2013
comment
@Gray: взгляните на этот jsfiddle.net/jZNRP - person SW4; 13.11.2013
comment
@ExtPro Большое спасибо за это. Сначала я не очень понимал это различие. Визуализация была чрезвычайно полезной. - person Gray; 13.11.2013
comment
@Gray: Не беспокойтесь, вот для чего нужен ТАК :) - person SW4; 13.11.2013
comment
Просто небольшое обновление JSFiddle @ExtPro, чтобы более четко проиллюстрировать разницу (в основном я только увеличил размер шрифта, но эй);) jsfiddle.net/jZNRP/1 - person gvee; 13.11.2013