CSS-контент не работает

Я хотел бы добавить текст для абзаца через CSS, а не в HTML, потому что он может меняться с учетом реакции сайта.

Теперь я не могу заставить его работать, и мне интересно, если что-то не так с CSS?

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

HTML:

<p class="title"></p>

CSS

p.title {
        width: auto;
        height: auto;
        position: relative;
        float: left;
        clear: none;
        margin: 40px 0 0 0;
        padding: 0;
        display: block;
        font-family: 'Fjalla One', sans-serif; 
        font-weight: 400; 
        font-size: 36px;
        color: #d76e50; color: rgba(215, 92, 52, 0.9);
        cursor: default;
        content:"TITLE GOES HERE";
}

Ответ 1

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

Ответ 2

CSS не является местом размещения контента, даже если вы хотите, чтобы контент изменялся как часть вашего адаптивного дизайна.

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

Но для прямого ответа на ваш вопрос: CSS content действует только в очень немногих случаях. Он недоступен в общих селекторах (именно из-за пунктов, которые я сделал выше).

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

И даже в тех случаях, когда вы можете использовать его, вы все равно не будете использовать его так, как вы описали. С ::before и ::after он не предназначен для размещения фактического содержимого в вашем CSS; это подразумевается на самом деле просто для таких задач, как вставка маркера рядом с чем-то, например маленький символ, который вы получаете рядом с внешними ссылками на сайтах вроде Wikipedia. Такого рода вещи все еще стилизуются и, следовательно, правильны быть в CSS, даже если он добавляет "контент".

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

Более типичным способом достижения того, что вы пытаетесь сделать, является наличие двух (или более) элементов на странице, содержащих различные строки контента, и чтобы ваш отзывчивый CSS-код вызывал один из них, чтобы быть видимым и другие, скрытые в соответствии с размером страницы.

Ответ 3

Свойство содержимого CSS может применяться только pseudo-elements в соответствии с сетями разработчиков Mozilla Документы, поэтому вы можете добавить эти строки кода в свой файл css:

p.title:after{
    content:"TITLE GOES HERE";
}