Я хотел бы добавить текст для абзаца через 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";
}
Свойство CSS content может использоваться только с псевдо-элементами :before и :after. Вы можете обойти это, создав дочерний элемент, который имеет только стили на :after, например, а также включает свойство content для текста, зависящего от разрешения посредством медиа-запросов.
CSS не является местом размещения контента, даже если вы хотите, чтобы контент изменялся как часть вашего адаптивного дизайна.
Весь смысл HTML/CSS/JS состоит в том, чтобы иметь разделение между контентом, стилем и сценарием. Ввод содержимого в CSS или стиль в HTML разбивается, что независимо от ваших намерений.
Но для прямого ответа на ваш вопрос: CSS content действует только в очень немногих случаях. Он недоступен в общих селекторах (именно из-за пунктов, которые я сделал выше).
content доступен только для селекторов, которые приводят к добавлению псевдоэлементов на страницу. На практике это означает, что вы можете использовать только content с помощью селекторов ::before и ::after.
И даже в тех случаях, когда вы можете использовать его, вы все равно не будете использовать его так, как вы описали. С ::before и ::after он не предназначен для размещения фактического содержимого в вашем CSS; это подразумевается на самом деле просто для таких задач, как вставка маркера рядом с чем-то, например маленький символ, который вы получаете рядом с внешними ссылками на сайтах вроде Wikipedia. Такого рода вещи все еще стилизуются и, следовательно, правильны быть в CSS, даже если он добавляет "контент".
Обратите внимание, что содержимое, добавленное с помощью ::before и ::after, может вести себя по-другому с другим контентом вашего сайта. Например, вы не сможете получить доступ к псевдоэлементу через Javascript, и ваш пользователь может не выбрать текст.
Более типичным способом достижения того, что вы пытаетесь сделать, является наличие двух (или более) элементов на странице, содержащих различные строки контента, и чтобы ваш отзывчивый CSS-код вызывал один из них, чтобы быть видимым и другие, скрытые в соответствии с размером страницы.
Свойство содержимого CSS может применяться только pseudo-elements в соответствии с сетями разработчиков Mozilla Документы, поэтому вы можете добавить эти строки кода в свой файл css:
p.title:after{
content:"TITLE GOES HERE";
}