Не понимаю как добавить в моем случае псевдо-элементы к тексту. After и Before. Добавляю, а они не работают
Есть основной текст состоящий из 6 блоков в тегах span. В 1-3 блоках выделены первые буквы, в 4-6 блоках выделена первая строчка. Нужно добавить текст с помощью псевдоэлементов after(Для 1-3 блока) и before(Для 4-6 блоков), при том они должны быть блочными, каждый иметь свой фон и границу от основного текста.
Как это сделать с учетом уже написанного мной кода?
body {
background: url(фон/1.jpg) fixed no-repeat;
background-size: 100%;
}
span {
display: block;
font-size: 18pt;
}
.Text1::first-letter {
color: rgb(230, 174, 90);
font-size: 150%;
font-family: Courier;
}
.Text2::first-line {
color: rgb(230, 174, 90);
font-size: 200%;
font-family: Courier;
}
#up {
margin-left: 100px;
overflow-y: auto;
width: 1200px;
height: 300px;
background: rgba(27, 41, 17, 0.7);
border: 5px solid rgb(230, 174, 90);
border-radius: 10px;
}
#block_1 {
display: inline-block;
width: 300px;
padding: 5px;
background: rgba(76, 99, 28, 0.8);
border: 3px solid rgb(27, 41, 17);
border-radius: 10px;
}
#block_2 {
display: inline-block;
width: 300px;
margin-left: 50px;
padding: 5px;
background: rgba(108, 122, 45, 0.8);
border: 3px solid rgb(27, 41, 17);
border-radius: 10px;
}
#block_3 {
display: inline-block;
width: 300px;
margin-left: 50px;
padding: 5px;
background: rgba(117, 122, 45, 0.8);
border: 3px solid rgb(27, 41, 17);
border-radius: 10px;
}
#down {
margin-top: 20px;
margin-left: 100px;
width: 1400px;
background: rgba(139, 69, 19, 0.7);
border: 5px solid rgb(27, 41, 17);
border-radius: 10px;
}
#block_4 {
display: inline-block;
overflow-y: auto;
width: 300px;
height: 300px;
padding: 5px;
background: rgba(122, 63, 21, 0.8);
border: 3px solid rgb(230, 174, 90);
border-radius: 10px;
}
#block_5 {
display: inline-block;
overflow-y: auto;
width: 300px;
height: 300px;
margin-left: 50px;
padding: 5px;
background: rgba(105, 63, 38, 0.8);
border: 3px solid rgb(230, 174, 90);
border-radius: 10px;
}
#block_6 {
display: inline-block;
overflow-y: auto;
width: 300px;
height: 300px;
margin-left: 50px;
padding: 5px;
background: rgba(140, 81, 39, 0.8);
border: 3px solid rgb(230, 174, 90);
border-radius: 10px;
}
<div id="up">
<div id="block_1">
<span class="Text1">В русском языке традиционно применяются французские «ёлочки», а для «кавычек „внутри“ кавычек» и при письме от руки — немецкие „лапки“.
Кроме того, при переводе значения иноязычного слова иногда также употребляют английские одинарные (или так называемые «марровские») кавычки (‘вот такие’): например, англ. reader — ‘читатель’.</span>
</div>
<div id="block_2">
<span class="Text1">Когда компьютеров еще не было, но уже были пишущие машинки, для кавычек использовали одну "непарную кавычку".
Именно она переползла на клавиатуру компьютера (к двойке) и в большинство набранных на компьютере текстов. Использовать её неграмотно, заменить её чем-либо — нетривиально.</span>
</div>
<div id="block_3">
<span class="Text1">Рассмотрим «Елочки» (они же «двойные угловые кавычки») по-английски называются guillemet — «гийоме». Это слово — уменьшительная форма имени Уильям, поскольку их изобретателем стал французский пуансонист XVI века Гийом Ле Бё (Guillaume le Bé). Примечательно, что по той же схеме образовано название «ёлочек» и, например, в ирландском языке: «liamóg» как сокращение от «Liam» (Уильям, Гийом). В общем, гийомчики.
Есть, впрочем, и забавный штришок — иногда «ёлочки» называют не guillemets, а guillemots. Guillemot — это кайра: птица, лапы которой чем-то похожи на «елочки». За горбатой спиной «елочек», как видите, века эволюции. В разное время в составе разных шрифтов они выглядели она по-разному — угловые, круглые.</span>
</div>
</div>
<div id="down">
<div id="block_4">
<span class="Text2">В большинстве языков, в которых используются «ёлочки», они обращены острием наружу: «вот так». Языков этих, кроме русского, наберётся пара дюжин — в том числе албанский, арабский, вьетнамский, греческий. В несколько меньшем количестве языков — венгерском, датском, немецком (вне Швейцарии), сербском, словацком, словенском, хорватском, чешском — их ставят прямо противоположным образом: »вот так«. Впрочем, нет предела человеческой изобретательности — шведы с финнами изобрели свой, особенный, самобытный способ постановки елочки: »вот такой».</span>
</div>
<div id="block_5">
<span class="Text2">«Лапки» — это такие двойные запятые. Левые «лапки» именно как двойные запятые и выглядят: они ставятся внизу, в начале текста; закрывающие правые «лапки» — пара перевернутых запятых, которые ставятся вверху: „вот так“. В ряде языков — например африканском и польском — закрывающие правые «лапки» представляют собой пару не перевернутых, а прямых «лапок»: „вот так”.</span>
</div>
<div id="block_6">
<span class="Text2">Как и «лапки», “английские двойные кавычки” представляют собой вольную фантазию на тему очередной позы, в которую можно поставить пару запятых (их, кстати, на Западе иногда называют «6699» или «утиные лапки»). И открывающие, и закрывающие английские двойные кавычки находятся вверху: левая (открывающая) — пара перевернутых запятых, а правая (закрывающая) — пара прямых. Впрочем, изобретательные шведы с финнами отличились и здесь: как и «ёлочки», их двойные кавычки — непарные: и открывающие, и закрывающие ставятся вверху и представляют собой пару прямых запятых: ”вот так”</span>
</div>
</div>
Ответы (1 шт):
Автор решения: Sevastopol'
→ Ссылка
Сашенька, если я правильно понимаю задачу, то вот, смотри. Если что-то непонятно, то задавай вопросы, постараюсь тебе помочь.
Дополнительно рекомендую почитать:
body {
background: url(фон/1.jpg) fixed no-repeat;
background-size: 100%;
}
span {
display: block;
font-size: 18pt;
}
.Text1::first-letter {
color: rgb(230, 174, 90);
font-size: 150%;
font-family: Courier;
}
.Text2::first-line {
color: rgb(230, 174, 90);
font-size: 200%;
font-family: Courier;
}
#up {
margin-left: 100px;
overflow-y: auto;
width: 1200px;
height: 300px;
background: rgba(27, 41, 17, 0.7);
border: 5px solid rgb(230, 174, 90);
border-radius: 10px;
}
#block_1 {
display: inline-block;
width: 300px;
padding: 5px;
background: rgba(76, 99, 28, 0.8);
border: 3px solid rgb(27, 41, 17);
border-radius: 10px;
}
#block_2 {
display: inline-block;
width: 300px;
margin-left: 50px;
padding: 5px;
background: rgba(108, 122, 45, 0.8);
border: 3px solid rgb(27, 41, 17);
border-radius: 10px;
}
#block_3 {
display: inline-block;
width: 300px;
margin-left: 50px;
padding: 5px;
background: rgba(117, 122, 45, 0.8);
border: 3px solid rgb(27, 41, 17);
border-radius: 10px;
}
#down {
margin-top: 20px;
margin-left: 100px;
width: 1400px;
background: rgba(139, 69, 19, 0.7);
border: 5px solid rgb(27, 41, 17);
border-radius: 10px;
}
#block_4 {
display: inline-block;
overflow-y: auto;
width: 300px;
height: 300px;
padding: 5px;
background: rgba(122, 63, 21, 0.8);
border: 3px solid rgb(230, 174, 90);
border-radius: 10px;
}
#block_5 {
display: inline-block;
overflow-y: auto;
width: 300px;
height: 300px;
margin-left: 50px;
padding: 5px;
background: rgba(105, 63, 38, 0.8);
border: 3px solid rgb(230, 174, 90);
border-radius: 10px;
}
#block_6 {
display: inline-block;
overflow-y: auto;
width: 300px;
height: 300px;
margin-left: 50px;
padding: 5px;
background: rgba(140, 81, 39, 0.8);
border: 3px solid rgb(230, 174, 90);
border-radius: 10px;
}
/*Добавляем after для блоков с 1 по 3*/
#block_1::after {
content: "В 1-3 блоках выделены первые буквы, в 4-6 блоках выделена первая строчка. Нужно добавить текст с помощью псевдоэлементов after(Для 1-3 блока)";
display: block;
background: red;
border: 2px solid black;
}
#block_2::after {
content: "В 1-3 блоках выделены первые буквы, в 4-6 блоках выделена первая строчка. Нужно добавить текст с помощью псевдоэлементов after(Для 1-3 блока)";
display: block;
background: blue;
border: 2px solid red;
}
#block_3::after {
content: "В 1-3 блоках выделены первые буквы, в 4-6 блоках выделена первая строчка. Нужно добавить текст с помощью псевдоэлементов after(Для 1-3 блока)";
display: block;
background: green;
border: 2px solid blue;
}
/*Добавляем before для блоков с 4 по 6*/
#block_4::before {
content: "В 1-3 блоках выделены первые буквы, в 4-6 блоках выделена первая строчка. Нужно добавить текст с помощью псевдоэлементов after(Для 1-3 блока)";
display: block;
background: green;
border: 2px solid blue;
}
#block_5::before {
content: "В 1-3 блоках выделены первые буквы, в 4-6 блоках выделена первая строчка. Нужно добавить текст с помощью псевдоэлементов after(Для 1-3 блока)";
display: block;
background: blue;
border: 2px solid red;
}
#block_6::before {
content: "В 1-3 блоках выделены первые буквы, в 4-6 блоках выделена первая строчка. Нужно добавить текст с помощью псевдоэлементов after(Для 1-3 блока)";
display: block;
background: red;
border: 2px solid black;
}
<div id="up">
<div id="block_1">
<span class="Text1">В русском языке традиционно применяются французские «ёлочки», а для «кавычек „внутри“ кавычек» и при письме от руки — немецкие „лапки“.
Кроме того, при переводе значения иноязычного слова иногда также употребляют английские одинарные (или так называемые «марровские») кавычки (‘вот такие’): например, англ. reader — ‘читатель’.</span>
</div>
<div id="block_2">
<span class="Text1">Когда компьютеров еще не было, но уже были пишущие машинки, для кавычек использовали одну "непарную кавычку".
Именно она переползла на клавиатуру компьютера (к двойке) и в большинство набранных на компьютере текстов. Использовать её неграмотно, заменить её чем-либо — нетривиально.</span>
</div>
<div id="block_3">
<span class="Text1">Рассмотрим «Елочки» (они же «двойные угловые кавычки») по-английски называются guillemet — «гийоме». Это слово — уменьшительная форма имени Уильям, поскольку их изобретателем стал французский пуансонист XVI века Гийом Ле Бё (Guillaume le Bé). Примечательно, что по той же схеме образовано название «ёлочек» и, например, в ирландском языке: «liamóg» как сокращение от «Liam» (Уильям, Гийом). В общем, гийомчики.
Есть, впрочем, и забавный штришок — иногда «ёлочки» называют не guillemets, а guillemots. Guillemot — это кайра: птица, лапы которой чем-то похожи на «елочки». За горбатой спиной «елочек», как видите, века эволюции. В разное время в составе разных шрифтов они выглядели она по-разному — угловые, круглые.</span>
</div>
</div>
<div id="down">
<div id="block_4">
<span class="Text2">В большинстве языков, в которых используются «ёлочки», они обращены острием наружу: «вот так». Языков этих, кроме русского, наберётся пара дюжин — в том числе албанский, арабский, вьетнамский, греческий. В несколько меньшем количестве языков — венгерском, датском, немецком (вне Швейцарии), сербском, словацком, словенском, хорватском, чешском — их ставят прямо противоположным образом: »вот так«. Впрочем, нет предела человеческой изобретательности — шведы с финнами изобрели свой, особенный, самобытный способ постановки елочки: »вот такой».</span>
</div>
<div id="block_5">
<span class="Text2">«Лапки» — это такие двойные запятые. Левые «лапки» именно как двойные запятые и выглядят: они ставятся внизу, в начале текста; закрывающие правые «лапки» — пара перевернутых запятых, которые ставятся вверху: „вот так“. В ряде языков — например африканском и польском — закрывающие правые «лапки» представляют собой пару не перевернутых, а прямых «лапок»: „вот так”.</span>
</div>
<div id="block_6">
<span class="Text2">Как и «лапки», “английские двойные кавычки” представляют собой вольную фантазию на тему очередной позы, в которую можно поставить пару запятых (их, кстати, на Западе иногда называют «6699» или «утиные лапки»). И открывающие, и закрывающие английские двойные кавычки находятся вверху: левая (открывающая) — пара перевернутых запятых, а правая (закрывающая) — пара прямых. Впрочем, изобретательные шведы с финнами отличились и здесь: как и «ёлочки», их двойные кавычки — непарные: и открывающие, и закрывающие ставятся вверху и представляют собой пару прямых запятых: ”вот так”</span>
</div>
</div>