Css добавить текст: Добавить, заменить или изменить текст с помощью CSS

12.09.2023 alexxlab

content | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
8.0	1.0+	7.0+	1.0+	1.0+	1.0+	1.0+

Краткая информация

Значение по умолчанию	Пустая строка
Наследуется	Нет
Применяется	К псевдоэлементам :before и :after
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/generate.html#content

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

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

Синтаксис

Значения

Строка: Текст, который добавляется на веб-страницу, строка при этом должна браться в двойные или одинарные кавычки. Допускается использовать юникод для вставки спецсимволов. Спецсимволы HTML которые начинаются с амперсанда (§ например), будут отображаться как есть, т.е. простым текстом (§, а не §).
attr(параметр): Возвращает строку, которая является значением параметра тега указанного в скобках. Например, a:after {content:attr(href)} добавит после ссылки её адрес, т.е. значение атрибута href. Если указанного атрибута нет, вернется пустая строка.
open-quote: Вставляет открывающую кавычку, тип которой устанавливается с помощью стилевого свойства quotes.
close-quote: Вставляет закрывающую кавычку.
no-open-quotes: Отменяет добавление открывающей кавычки.
no-close-quote: Отменяет добавление закрывающей кавычки.
url: Абсолютный или относительный адрес вставляемого объекта. Если указанный файл браузер не может отобразить, то значение игнорируется.
counter: Выводит значение счетчика, заданного свойством counter-reset.
none: Не добавляет никакое содержание.
normal: Задается как none для псевдоэлементов :before и :after.
inherit: Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>content</title>
  <style>
   .tag {
    color: navy; /* Цвет текста */
    font-family: monospace; /* Моношириный шрифт */
    quotes: "<" ">"; /* Устанавливаем вид кавычек */
   } 
   .
 tag:before {
    content: open-quote; /* Добавляем перед текстом открывающую кавычку */
  }
   .tag:after {
    content: close-quote; /* Добавляем после текста закрывающую кавычку */
   }
  </style>
 </head>
 <body>
  <p>Тег <span>DEL</span> используется 
  для выделения текста, который был удален в новой версии документа.</p> 
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства content

Браузеры

Firefox до версии 2.0 включительно и Opera до версии 9.2 включительно не поддерживают значение none. Safari до версии 3.1 не поддерживает значение none и normal.

Chrome и Safari поддерживают свойство quotes для добавления кавычек с версии 11.0 и 5.1 соответственно.

CSS по теме

content

Статьи по теме

Атрибут data-*
Всплывающая подсказка на CSS
Генератор шрифтов Fontello
Линия отреза
Начинаем работать с CSS-счётчиками
Список с русскими буквами

Статьи по теме

Рецепты CSS

Как изменить вид написания чисел в списке и сделать, чтобы после каждого номера шла круглая скобка?
Как изменить стиль чисел в списке?
Как сделать нумерацию с определенного числа через стили?
Как сделать, чтобы цвет маркеров в списке отличался от цвета текста?
Хочу изменить вид маркера на другой символ. Как это сделать?

Как использовать HTML теги в CSS (content)

Здравствуйте,хотел бы узнать каким образом можно использовать HTML теги в поле CSS (content). Вот код

.hello {
    position: absolute;
    width: 95%;
    top: 100px;
    left: 0;
    font-size: 11px;
    line-height: 40px;
    text-align: left;
    color: #000000;
}
.timer:after {
  content: "<span>Привет</span>";
  content: "Бла бла бла : ";
}

html
css

В content не допускается html, только текст. Собственно сам css к html привязан только условно, css может задавать стили чего угодно. Вообще, если в after пихается невпихуемое, то, скорее всего, надо шаблон менять, а не html, after — это проставить красную звездочку всем

label.required, например.

Ну как минимум надо использовать разные типы кавычек, а так да, любой текст в content будет представлен как текст.

content: "<span>Привет</span>";

Да пишите себе на здоровье, но не пихайте туда теги HTML, им там не место. Принцип — мухи отдельно, а котлеты отдельно. Пример, мне надо на ul, добавить свой

list-items и покрасить его и выравнять, нет проблем, я пишу, что у меня list-items нет, но li:after я вставляю content:"✔ "; и в придачу, размер шрифта и цвет и все фантасмагории, что вы придумаете. Так я имею красивую галку в content, единственное правило — в стили пихаем только юникод

Вы можете вставить разве что картинку с изображением, на котором будет отформатированный текст, используя конструкцию content: url(...) Но теги в content будут интерпретироваться исключительно как текст.

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

xml — Как вставить текст перед элементом с помощью CSS?

Задавать вопрос

спросил 11 лет, 5 месяцев назад

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

Просмотрено 24к раз

Извините, я новичок в CSS и пытаюсь создать собственное отображение для XML-файла с помощью CSS.

Мой вопрос: как я могу отобразить определенный текст перед определенным элементом, например. г. «Проект:» перед каждым элементом?

Я пробовал то же самое с «:before», но, похоже, это не помогло

 ThinkingRock
{
цвет фона: #ffffff;
ширина: 100%;
}
проект
{
:before{content:"Проект:";};
дисплей: блок;
нижняя граница: 30pt;
поле слева: 0;
}
описание
{
цвет: #FF0000;
размер шрифта: 20pt;
}
примечания
{
цвет: #0000FF;
размер шрифта: 20pt;
}
идентификатор, создано, родитель, тема, контекст, состояние, выполнено, приоритет, изменено, цель, успех, мозговой штурм, обработано
{
дисплей: блок;
цвет: #000000;
поле слева: 20pt;
}

XML-файл используется так: http://www.

trgtd.com.au/index.php?option=com_docman&task=doc_download&gid=16&Itemid=71
Я добавил только первую строку

: До -сама псевдо-селектор, так что он нуждается в своем собственном блоке стиля, как ниже:

 проект: до {
  содержание:"Проект:";
}
проект {
  дисплей: блок;
  нижняя граница: 30pt;
  поле слева: 0;
}

скрипка: http://jsfiddle.net/wNEt3/

скрипка с использованием ваших xml и css: http://jsfiddle.net/pRwMT/1/

Кстати, http://htmldog.com/ отличный место, где можно найти учебники по HTML и CSS, и они любезно указывают на несоответствия W3schools, если вы посетили их первыми: D

использовать z-index , z-index Работать только с позиция: фиксированная, относительная, абсолютная :

 проект: до {
  ширина:100%;
  высота:100%;
  положение: абсолютное;
  содержание:"";
  Z-индекс:-2;
}
проект {
  должность: родственница;
  дисплей: блок;
  z-индекс: 30;
}

или:

 проект: до {
  ширина:100%;
  высота:100%;
  должность: родственница;
  содержание:"";
  Z-индекс:-2;
}
проект {
  дисплей: блок;
  z-индекс: 30;
}

документация: https://www.

w3schools.com/cssref/pr_pos_z-index.asp

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.

html — Как добавить текст или символы с помощью CSS (без JavaScript)?

спросил 13 лет 10 месяцев назад

Изменено 7 лет, 10 месяцев назад

Просмотрено 18 тысяч раз

Ну, это должно работать в IE, я знаю, что IE не поддерживает свойства содержимого, что-то еще?

html
css
теги

Единственным вариантом является свойство content :

Свойство содержимого используется с :до и :после псевдоэлементов, до вставить сгенерированный контент.

Но, как вы заметили, это часть CSS 3 и не поддерживается IE. Тем временем вам нужно будет компенсировать это с помощью JavaScript.

Это вполне возможно решить без Javascript, используя комбинацию HTML и CSS. Хитрость заключается в том, чтобы продублировать содержимое, добавленное CSS, в HTML, условный комментарий, специфичный для IE (не отображаемый другими браузерами), и использовать display CSS-селектор для переключения при отображении этого элемента. Согласно MSDN, IE 8+ поддерживает CSS :after и content: , поэтому только в IE 7 и ниже необходимо использовать условный комментарий.

Вот пример: