CSS «контент» не работает
Я хотел бы добавить текст для абзаца через CSS, а не в HTML, потому что он может измениться в зависимости от скорости реакции веб-сайта.
Теперь я не могу заставить его работать, и мне интересно, что-то не так с CSS?
Кроме того, это единственный способ сделать это (с чистым HTML и CSS) или есть другой способ настроить таргетинг на текст и изменить его при каждом разрешении?
4 ответа
Свойство CSS content можно использовать только с псевдоэлементами ::before и ::after . Вы можете обойти это, создав дочерний элемент, который, например, имеет стили только для ::after , а также включает свойство content для текста, который зависит от разрешения через медиа-запросы.
Атрибут содержимого не будет работать с обычным объявлением CSS; вам нужно использовать псевдодекларацию :before (но :after тоже подойдет).
section-title:before < content: "Section Title"; >section-title
Этот пример можно легко адаптировать к вашей проблеме. Что мне нравится в этом конкретном примере по сравнению с другими, так это то, что ваш окончательный HTML-код будет просто:
Свойство содержимого CSS можно применять только псевдоэлементами в соответствии с Documents сети разработчиков Mozilla, чтобы вы могли добавить эти строки кода в ваш файл css:
CSS — не место для размещения контента, даже если вы действительно хотите, чтобы контент изменялся как часть вашего адаптивного дизайна.
Вся суть HTML / CSS / JS заключается в разделении содержимого, стиля и сценариев. Помещение контента в CSS или стилизация в HTML ломают это, независимо от ваших намерений.
Но чтобы прямо ответить на ваш вопрос: CSS content действителен только в очень немногих случаях. Он недоступен в общих селекторах (именно из-за того, что я сделал выше).
content доступен только для селекторов, которые приводят к добавлению псевдоэлементов на страницу. На практике это означает, что вы действительно можете использовать content только с селекторами ::before и ::after .
И даже в тех случаях, когда вы можете его использовать, вы все равно не должны использовать его так, как вы описали. С ::before и ::after он не предназначен для размещения фактического содержания в вашем CSS; на самом деле он предназначен только для таких задач, как вставка маркера рядом с чем-либо, например маленьким символом, который вы видите рядом с внешними ссылками на таких сайтах, как Википедия. Такого рода вещи все еще являются стилизованными и, следовательно, правильными для CSS, даже несмотря на то, что они добавляют «контент».
Обратите внимание, что контент, добавленный с использованием ::before и ::after , может вести себя иначе, чем другой контент на вашем сайте. Например, вы не сможете получить доступ к псевдоэлементу через Javascript, а ваш пользователь не сможет выбрать текст.
Более типичный способ добиться того, что вы пытаетесь сделать, — это иметь на странице два (или более) элемента, которые содержат различные строки содержимого, и чтобы ваш отзывчивый код CSS запускал один из них, чтобы быть видимым, а другие скрыто в соответствии с размером страницы.
Не работает свойство content
По стилям вопрос. Есть #line. Для него before и after. before и after работают, а на самом блоке не могу ничего писать.
+ есть вопрос. Копипастнул блоки с текстами на остальные секции. С выравниванием плохо. Не могу понять, как их сделать посередине секции?
Вывод текста через css свойство «content»
Ребят, прошу помощи. Не пойму, почему время от время случается такой глюк: вместо "итого".
Объясните почему justify-content не работает
Justify-content: center не выравнивает по центру <!DOCTYPE html> <html lang="en"> <head> .
Не работает свойство background
Почему фоновый рисунок не устанавливается в нижний правый угол для sidebar? Я же прописываю.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
#line { width: 520px; height: 30px; background: #fff; border-radius: 90px; position: relative; content: 'Середина 2'; display: block; } #line:before, #line:after { content: ''; /* */ height: 30px; position:relative; border-radius: 90px; } #line:before { font-size: 20px; text-align:justify; content: 'Верхнее 2'; width: 110%; background: #fff; position: absolute; top: -60px; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } #line:after { content: 'Нижнее 2'; width: 200px; background: #fff; position: absolute; left: 50%; bottom: -60px; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); }
Сообщение было отмечено Владислав231 как решение
Решение
Сообщение от Владислав231 
Оу.
Сори, я только начинаю в этой каше вариться)
А по поводу второго вопроса можете подсказать?
Сообщение от Владислав231
Должно быть, как на первой картинке, получилось, как на второй (Я копипастнул с шапки)
Нужно, чтобы текст отображался одинаково по центру секции
Так выглядит нерабочий
width: 100vw;
height: calc(100vh — 160px);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 160px;
background: url(../video/back.mp4);
>
#line width: 520px;
height: 30px;
background: #fff;
border-radius: 90px;
position: relative;
content: ‘Середина 2’;
display: block;
>
#line:before, #line:after content: »; /* */
height: 30px;
position:relative;
border-radius: 90px;
>
#line:before font-size: 20px;
text-align:justify;
content: ‘Верхнее 2’;
width: 110%;
background: #fff;
position: absolute;
top: -60px;
left: 50%;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
>
#line:after content: ‘Нижнее 2’;
width: 200px;
background: #fff;
position: absolute;
left: 50%;
bottom: -60px;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
>
/*** Hero Section Styles ***/
#hero-section width: 100vw;
height: calc(100vh — 160px);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 160px;
background: url(../video/back.mp4);
>
#head-line width: 520px;
height: 30px;
background: #fff;
border-radius: 90px;
position: relative;
>
#head-line:before, #head-line:after content: »;
height: 30px;
border-radius: 90px;
>
#head-line:before font-size: 20px;
text-align:justify;
content: ‘Если вы это видите, значит мой тестовый хостинг пустует’;
width: 110%;
background: #fff;
position: absolute;
top: -60px;
left: 50%;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
>
#head-line:after content: ‘content’;
width: 200px;
background: #fff;
position: absolute;
left: 50%;
bottom: -60px;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
>
/*** Section Styles ***/
section width: 100vw;
height: calc(100vh — 100px);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
>
section:nth-child(odd) background: #FA6C98;
>
section:nth-child(even) background: #79EDFC;
>
CSS «контент» не работает
Я хотел бы добавить текст для абзаца через CSS, а не в HTML, потому что он может меняться с учетом реакции сайта. Теперь я не могу заставить его работать, и мне интересно, если что-то не так с CSS? Кроме того, это единственный способ сделать это (с чистым HTML и CSS) или есть другой способ настроить таргетинг на текст и изменить его при каждом разрешении? HTML:
3 ответа
Свойство CSS content может использоваться только с псевдо-элементами :before и :after . Вы можете обойти это, создав дочерний элемент, который имеет только стили на :after , например, а также включает свойство content для текста, зависящего от разрешения посредством медиа-запросов.
Я добавил :before p.tittle . Кажется, сейчас работает. Благодарю. Еще один вопрос, как добавить текст в тег содержимого?
CSS не является местом размещения контента, даже если вы хотите, чтобы контент изменялся как часть вашего адаптивного дизайна.
Весь смысл HTML/CSS/JS состоит в том, чтобы иметь разделение между контентом, стилем и сценарием. Ввод содержимого в CSS или стиль в HTML разбивается, что независимо от ваших намерений.
Но для прямого ответа на ваш вопрос: CSS content действует только в очень немногих случаях. Он недоступен в общих селекторах (именно из-за пунктов, которые я сделал выше).
content доступен только для селекторов, которые приводят к добавлению псевдоэлементов на страницу. На практике это означает, что вы можете использовать только content с помощью селекторов ::before и ::after .
И даже в тех случаях, когда вы можете использовать его, вы все равно не будете использовать его так, как вы описали. С ::before и ::after он не предназначен для размещения фактического содержимого в вашем CSS; это подразумевается на самом деле просто для таких задач, как вставка маркера рядом с чем-то, например маленький символ, который вы получаете рядом с внешними ссылками на сайтах вроде Wikipedia. Такого рода вещи все еще стилизуются и, следовательно, правильны быть в CSS, даже если он добавляет «контент».
Обратите внимание, что содержимое, добавленное с помощью ::before и ::after , может вести себя по-другому с другим контентом вашего сайта. Например, вы не сможете получить доступ к псевдоэлементу через Javascript, и ваш пользователь может не выбрать текст.
Более типичным способом достижения того, что вы пытаетесь сделать, является наличие двух (или более) элементов на странице, содержащих различные строки контента, и чтобы ваш отзывчивый CSS-код вызывал один из них, чтобы быть видимым и другие, скрытые в соответствии с размером страницы.