Не понимаю как добавить в моем случае псевдо-элементы к тексту. 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'

Сашенька, если я правильно понимаю задачу, то вот, смотри. Если что-то непонятно, то задавай вопросы, постараюсь тебе помочь.

Дополнительно рекомендую почитать:

  1. Псевдоэлемент :before
  2. Псевдоэлемент :after

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>

→ Ссылка