Css псевдоэлементы :before и :after, изучение и применение

Browser compatibility

The compatibility table on this page is generated from structured data. If you’d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
Chrome Full support 1 Edge Full support 12 Firefox Full support 1.5 Notes IE Full support 9 Opera Full support 7 Safari Full support 4 WebView Android Full support ≤37 Chrome Android Full support 18 Firefox Android Full support 4 Notes Opera Android Full support 10.1 Safari iOS Full support 5.1 Samsung Internet Android Full support 1.0
Animation and transition support Chrome Full support 26 Edge Full support 12 Firefox Full support 4 IE No support No Opera Full support 15 Safari No support No WebView Android Full support ≤37 Chrome Android Full support 26 Firefox Android Full support 4 Opera Android Full support 14 Safari iOS No support No Samsung Internet Android Full support 1.5

.before( content [, content ] )Возвращает: jQuery

Описание: Функция помещает заданное содержимое перед определенными элементами страницы.


    • content Тип: or or or or

      HTML string, DOM element, text node, array of elements and text nodes, or jQuery object to insert before each element in the set of matched elements.

    • content Тип: or or or or

      One or more additional DOM elements, text nodes, arrays of elements and text nodes, HTML strings, or jQuery objects to insert before each element in the set of matched elements.

  • A function that returns an HTML string, DOM element(s), text node(s), or jQuery object to insert before each element in the set of matched elements. Receives the index position of the element in the set as an argument. Within the function, this refers to the current element in the set.

  • A function that returns an HTML string, DOM element(s), text node(s), or jQuery object to insert before each element in the set of matched elements. Receives the index position of the element in the set and the old HTML value of the element as arguments. Within the function, this refers to the current element in the set.

The and methods perform the same task. The major difference is in the syntax—specifically, in the placement of the content and target. With , the content to be inserted comes from the method’s argument: . With , on the other hand, the content precedes the method and is inserted before the target, which in turn is passed as the method’s argument: .

Consider the following HTML:

1 2 3 4 5

You can create content and insert it before several elements at once:

1

Each inner element gets this new content:

1 2 3 4 5 6 7

You can also select an element on the page and insert it before another:

1

If an element selected this way is inserted into a single location elsewhere in the DOM, it will be moved before the target (not cloned):

1 2 3 4 5

Important: If there is more than one target element, however, cloned copies of the inserted element will be created for each target except for the last one.

Additional Arguments

Similar to other content-adding methods such as and , also supports passing in multiple arguments as input. Supported input includes DOM elements, jQuery objects, HTML strings, and arrays of DOM elements.

For example, the following will insert two new s and an existing before the first paragraph:

1 2 3 4 5

Since can accept any number of additional arguments, the same result can be achieved by passing in the three s as three separate arguments, like so: . The type and number of arguments will largely depend on how you collect the elements in your code.

Дополнительные замечания:

  • Prior to jQuery 1.9, would attempt to add or change nodes in the current jQuery set if the first node in the set was not connected to a document, and in those cases return a new jQuery set rather than the original set. The method might or might not have returned a new result depending on the number or connectedness of its arguments! As of jQuery 1.9, , , and always return the original unmodified set. Attempting to use these methods on a node without a parent has no effect—that is, neither the set nor the nodes it contains are changed.
  • By design, any jQuery constructor or method that accepts an HTML string — jQuery(), .append(), .after(), etc. — can potentially execute code. This can occur by injection of script tags or use of HTML attributes that execute code (for example, ). Do not use these methods to insert strings obtained from untrusted sources such as URL query parameters, cookies, or form inputs. Doing so can introduce cross-site-scripting (XSS) vulnerabilities. Remove or escape any user input before adding content to the document.

CSS Справочники

CSS СправочникCSS ПоддержкаCSS СелекторыCSS ФункцииCSS ЗвукCSS Веб шрифтыCSS АнимацииCSS ДлиныCSS Конвертер px-emCSS ЦветаCSS Значение цветаCSS по умолчаниюCSS Символы

CSS Свойства

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-decoration-break box-shadow box-sizing caption-side caret-color @charset clear clip color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-kerning font-size font-size-adjust font-stretch font-style font-variant font-weight grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-gap grid-column-start grid-gap grid-row grid-row-end grid-row-gap grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows hanging-punctuation height hyphens @import isolation justify-content @keyframes left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width mix-blend-mode object-fit object-position opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin pointer-events position quotes resize right tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-overflow text-shadow text-transform top transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function unicode-bidi user-select vertical-align visibility white-space width word-break word-spacing word-wrap writing-mode z-index

Поддержка браузерами

Update compatibility data on GitHub

Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome для Android Firefox для Android Opera для Android Safari on iOS Samsung Internet
Chrome Полная поддержка 1 Edge Полная поддержка 12 Firefox Полная поддержка 1.5 Замечания IE Полная поддержка 9 Opera Полная поддержка 7 Safari Полная поддержка 4 WebView Android Полная поддержка ≤37 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Замечания Opera Android Полная поддержка 10.1 Safari iOS Полная поддержка 3.2 Samsung Internet Android Полная поддержка 1.0
Animation and transition support Chrome Полная поддержка 26 Edge Полная поддержка 12 Firefox Полная поддержка 4 IE Нет поддержки Нет Opera Полная поддержка 15 Safari Нет поддержки Нет WebView Android Полная поддержка ≤37 Chrome Android Полная поддержка 26 Firefox Android Полная поддержка 4 Opera Android Полная поддержка 14 Safari iOS Нет поддержки Нет Samsung Internet Android Полная поддержка 1.5

Примечания

Хотя исправления в Firefox 3.5 не позволяют созданному содержимому вести себя как отдельный предшествующий элемент (согласно : «Псевдоэлементы :before и :after взаимодействуют с другими элементами… как если бы они были настоящими элементами, добавленными в соответствующий им элемент.»), они могут быть использованы для небольшого улучшения в разметке без таблиц (например для центрирования). В предположении, что содержимое, которое необходимо центрировать, уже обёрнуто в некоторый элемент, столбцы перед и после содержимого могут быть добавлены без добавления других элементов (например в данном случае вероятно является более корректным обернуть текст в элемент , как в примере ниже, вместо того чтобы добавлять два пустых элемента  до и после текста). (И всегда устанавливайте ширину плавающего элемента, иначе он не будет плавающим!)

HTML

<div class="example">
<span id="floatme">"Плавающий перед" будет добавлен слева от текста
и не позволит переполнению этой строки обтекать его снизу.
Аналогично, "Плавающий после" будет добавлен справа от текста 
и не позволит переполнению этой строки обтекать его снизу.</span>
</div>

CSS

#floatme { float: left; width: 50%; }

/* Чтобы получить пустой столбец достаточно указать шестнадцатеричный код неразрывного пробела \a0 в качестве содержимого (используйте \0000a0, если за этим пробелом следуют другие символы) */
.example::before {
  content: "Плавающий перед";
  float: left;
  width: 25%
}
.example::after {
  content: "Плавающий после";
  float: right;
  width:25%
}

/* Для стилизации */
.example::before, .example::after {
  background: yellow;
  color: red;
}

CSS Свойства

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingcaption-sidecaret-color@charsetclearclipcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerighttab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

Navigation menu

Navigation

  • Main Page
  • Community portal
  • Preferences
  • Requested entries
  • Recent changes
  • Random entry
  • Help
  • Glossary
  • Donations
  • Contact us

In other languages

  • العربية
  • Azərbaycanca
  • Brezhoneg
  • Català
  • Čeština
  • Cymraeg
  • Dansk
  • Deutsch
  • Eesti
  • Ελληνικά
  • Español
  • فارسی
  • Français
  • Galego
  • 한국어
  • Հայերեն
  • Hrvatski
  • Ido
  • Interlingue
  • Italiano
  • ಕನ್ನಡ
  • Қазақша
  • Kiswahili
  • Kurdî
  • ລາວ
  • Latviešu
  • Lietuvių
  • Limburgs
  • Magyar
  • Malagasy
  • മലയാളം
  • မြန်မာဘာသာ
  • Na Vosa Vakaviti
  • Nederlands
  • 日本語
  • Norsk
  • Oʻzbekcha/ўзбекча
  • پښتو
  • ភាសាខ្មែរ
  • Polski
  • Português
  • Русский
  • संस्कृतम्
  • Simple English
  • Српски / srpski
  • Suomi
  • Svenska
  • தமிழ்
  • తెలుగు
  • ไทย
  • Тоҷикӣ
  • ᏣᎳᎩ
  • Türkçe
  • Українська
  • اردو
  • Vèneto
  • Tiếng Việt
  • 中文

Приклади

Додавання лапок

Простий приклад використання псевдо-елемента  додає лапки. Тут ми використовуємо і і  замість символів лапок.

HTML

<q>Деякі цитати,</q> сказав він, <q> кращі за інші.</q>

CSS

q::before { 
  content: "«";
  color: blue;
}

q::after { 
  content: "»";
  color: red;
}

Декоративний приклад

HTML

<span class="ribbon">Зверніть увагу де помаранчевий блок</span>

CSS

.ribbon {
  background-color: #5BC8F7;
}

.ribbon::before {
  content: "Подивіться на цей помаранчевий блок.";
  background-color: #FFBA10;
  border-color: black;
  border-style: dotted;
}

Список завдань

В цьому прикладі ми створимо простий список завдань, використовуючи псевдо-елемент. Цей метод може часто використовуватись щоб додавати невеликі штрихи до  UI щоб покращити user experience.

HTML

<ul>
  <li>Купити молоко</li>
  <li>Вигуляти собаку</li>
  <li>Вправи</li>
  <li>Писати код</li>
  <li>Грати музику</li>
  <li>Відпочити</li>
</ul>

CSS

li {
  list-style-type: none;
  position: relative;
  margin: 2px;
  padding: 0.5em 0.5em 0.5em 2em;
  background: lightgrey;
  font-family: sans-serif;
}

li.done {
  background: #CCFF99;
}

li.done::before {
  content: '';
  position: absolute;
  border-color: #009933;
  border-style: solid;
  border-width: 0 0.3em 0.25em 0;
  height: 1em;
  top: 1.3em;
  left: 0.6em;
  margin-top: -1em;
  transform: rotate(45deg);
  width: 0.5em;
}

JavaScript

var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if (ev.target.tagName === 'LI') {
     ev.target.classList.toggle('done'); 
  }
}, false);

Вище — код живого прикладу. Відмітьте, що ми не використовуємо іконки, а галочкою являється псевдо-елемент   які стилізовані за допомогою CSS.

Examples

Adding quotation marks

One simple example of using pseudo-elements is to provide quotation marks. Here we use both and to insert quotation characters.

HTML

<q>Some quotes,</q> he said, <q>are better than none.</q>
q::before { 
  content: "«";
  color: blue;
}

q::after { 
  content: "»";
  color: red;
}

Decorative example

We can style text or images in the property almost any way we want.

HTML

<span class="ribbon">Notice where the orange box is.</span>
.ribbon {
  background-color: #5BC8F7;
}

.ribbon::before {
  content: "Look at this orange box.";
  background-color: #FFBA10;
  border-color: black;
  border-style: dotted;
}

To-do list

In this example we will create a simple to-do list using pseudo-elements. This method can often be used to add small touches to the UI and improve user experience.

HTML

<ul>
  <li>Buy milk</li>
  <li>Take the dog for a walk</li>
  <li>Exercise</li>
  <li>Write code</li>
  <li>Play music</li>
  <li>Relax</li>
</ul>
li {
  list-style-type: none;
  position: relative;
  margin: 2px;
  padding: 0.5em 0.5em 0.5em 2em;
  background: lightgrey;
  font-family: sans-serif;
}

li.done {
  background: #CCFF99;
}

li.done::before {
  content: '';
  position: absolute;
  border-color: #009933;
  border-style: solid;
  border-width: 0 0.3em 0.25em 0;
  height: 1em;
  top: 1.3em;
  left: 0.6em;
  margin-top: -1em;
  transform: rotate(45deg);
  width: 0.5em;
}

JavaScript

var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if (ev.target.tagName === 'LI') {
     ev.target.classList.toggle('done'); 
  }
}, false);

Here is the above code example running live. Note that there are no icons used, and the check-mark is actually the that has been styled in CSS. Go ahead and get some stuff done.

Special characters

As this is CSS; not HTML, you can not use markup entities in content values. If you need to use a special character, and can not enter it literally into your CSS content string, use a unicode escape sequence, consisting of a backslash followed by the hexadecimal unicode value.

HTML

<ol>
  <li>Crack Eggs into bowl</li>
  <li>Add Milk</li>
  <li>Add Flour</li>
  <li aria-current='step'>Mix thoroughly into a smooth batter</li>
  <li>Pour a ladleful of batter onto a hot, greased, flat frying pan</li>
  <li>Fry until the top of the pancake loses its gloss</li>
  <li>Flip it over and fry for a couple more minutes</li>
  <li>serve with your favorite topping</li>
</ol>

Підтримка браузерів

Таблиця підтримки на цій сторінці згенерована з структурованих даних будь ласка прогляньте https://github.com/mdn/browser-compat-data і надішлінть нам pull request.

Update compatibility data on GitHub

Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
Chrome Full support 1 Edge Full support 12 Firefox Full support 1.5 Notes IE Full support 9 Opera Full support 7 Safari Full support 4 WebView Android Full support ≤37 Chrome Android Full support 18 Firefox Android Full support 4 Notes Opera Android Full support 10.1 Safari iOS Full support 5.1 Samsung Internet Android Full support 1.0
Animation and transition support Chrome Full support 26 Edge Full support 12 Firefox Full support 4 IE No support No Opera Full support 15 Safari No support No WebView Android Full support ≤37 Chrome Android Full support 26 Firefox Android Full support 4 Opera Android Full support 14 Safari iOS No support No Samsung Internet Android Full support 1.5

Значение until и before и разница в употреблении

Начнем с предлога until.

Рассмотрим несколько предложений:

  1. I want to stay in bed until – Я хочу оставаться в постели до 11 часов.
  2. He works until 10 pm every day. – Он работает до 10 вечера каждый день.
  3. I don’t sleep until 9 o’clock. Я не сплю до 6 часов (вплоть до 6 часов).
  4. The museum is closed until tomorrow. Музей закрыт до завтра.
  5. I’m cooking lunch until 2pm today. Сегодня я готовлю обед до 2 часов дня.

Во всех этих случаях предлог until в значении до указывает нам на момент, вплоть до которого совершается действие. То есть действие во всех этих предложениях будет длиться и закончится как раз в указанное время.

  • I want to stay in bed until – Я хочу оставаться в постели до 11. Это значит, что она будет в кровати, пока не пробьет 11, ранее она не встанет.
  • He works until 10 pm every day. – Он работает вплоть до 22 часов вечера и заканчивает работу в 22, не ранее. Действие продолжается до указанного времени.
  • I don’t sleep until 9 o’clock. – Это значит, что я нахожусь в бодрствующем состоянии вплоть до 9 часов. После 9 я ложусь спать, но до 9 – точно нет. Действие продолжается снова до указанного времени.
  • The museum is closed until tomorrow. – Это значит, что до завтрашнего дня музей будет находиться в закрытом состоянии, откроется он только завтра и точно не раньше.
  • I’m cooking lunch until 2pm today. – Я готовлю обед вплоть до 14 часов дня и закончу его готовить не раньше двух.

Теперь рассмотрим предлог before.

Несколько примеров:

  1. I never go to bed before 1.00. Я никогда не ложусь спать ранее часа.
  2. Come before 5 o’clock. Приходи до 5 часов.
  3. She always cooks lunch before 3. Она всегда готовит обед до трех.
  4. They played football before dinner. Они поиграли в футбол перед ужином (до ужина).

Во всех этих предложениях before имеет значение предшествования, действие происходит ранее указанного времени, но не длится вплоть до указанного времени.

I never go to bed before 1.00. Когда мы говорим это, мы имеем в виду, что мы не идем спать в любое время ранее часа. В данном случае на русский язык мы переводим данный предлог как «ранее». Come before 5 o’clock. Это значит, что мы просим прийти ранее пяти, не указывая в какое конкретно время нужно прийти

Важно, чтобы человек пришел ранее этого времени. Он может прийти в час, в два, в 12 часов. She always cooks lunch before 3

Это значит, что она готовит обед ранее трех часов. Как и в предыдущем примере. Она может готовить его в любое время ранее 3 часов. Но это не значит, что она закончит готовить в 3, может и раньше. They played football before dinner. Они поиграли в футбол раньше, чем настало время ужинать. Они играли не вплоть до начала ужина, а ранее.

Таким образом:

  • Until означает, что действие будет продолжаться до того момента как не наступит указанное время. I’m cooking lunch until 2pm today. – Процесс готовки будет продолжаться вплоть до двух часов, раньше двух я не закончу готовить.
  • Before означает прежде, ранее, но не обязательно до указанного времени. She always cooks lunch before Она готовит обед ранее трех часов, но необязательно, что она закончит в 3. Результат – в данном случае готовая еда – может произойти в любой момент до указанного временного отрезка.

Возьмем два похожих примера.

  1. They played football until 6. Действие закончилось в 6.
  2. They played football before Действие закончилось ранее 6 в любой момент ранее указанного времени.

Для лучшего понимания, эти действия можно изобразить на рисунке.

Нотатки

Також виправлення позиціонування в Firefox 3.5 не дозволяють вмісту бути згенерованим як окремий попередній елемент (відповідно до  «Псевдо-елемент :before і :after впливають на інші блоки так як вони були б справжніми елементами»), Вони можуть використовуватись, щоб впроваджувати незначні поліпшення для  не табличних розміток.  (наприклад, щоб досягти центрування) в випадку  доки вміст, що має центруватись  поміщений в дочірній наступний , колонка до і після контенту може бути представлена без додавання попереднього чи наступного сусіднього блоку (наприклад, це, можливо, найбільш семантично правильніше, додавати допоміжний span як нижче, чим додавати  <div/>  перед і після). (І завжди пам’ятайте додавати ширину до  float об’єкта, інакше він не буде обтікати!)

HTML

<div class="example">
<span id="floatme">"Floated Before" має згенеруватись ліворуч від
вікна перегляду і не виносити за межі рядка на потік нижче. Аналогічно
"Floated After" має з'являтись праворуч</span>
</div>

CSS

#floatme { float: left; width: 50%; }

/* Щоб отримати пусту колонку просто позначте в hex коді
  нерозривний пробіл: \a0 у якості контенту
(Використовуйте \0000a0 коли іде після такого символа як пробіл )
*/
.example::before {
  content: "Floated Before";
  float: left;
  width: 25%;
}
.example::after {
  content: "Floated After";
  float: right;
  width: 25%;
}

/* For styling */
.example::before, .example::after {
  background: yellow;
  color: red;
}

Как работать с псевдоэлементом after в CSS?

Псевдоэлемент after позволяет добавить произвольный контент в конце указанного элемента.

Алгоритм работы с ним абсолютно такой же как и с before. Разница заключается лишь в том, что он будет добавлять блок не перед, а в конце элемента класс или идентификатор которого вы укажете в CSS файле.

Например, добавим изображение после блока с идентификатором #content

Полноценную картинку через тег <img> мы таким образом не вставим, поэтому будем задавать её через фон.

  1. 1.Подготавливаем изображение нужного размера и загружаем его на хостинг в папку с картинками вашего шаблона.

  2. 2.Теперь в самом конце CSS файла пишем код:

    PHP

    #content::after { content:»; display: block; /*делаем элемент блочный*/ height:100px; /*задаём высоту*/ background: url(images/bottom-image1.png) no-repeat; /*указываем загруженную картинку в качестве фона псевдоэлемента*/ }

    1 2 3 4 5 6

    #content::after {

    content»;

    displayblock;/*делаем элемент блочный*/

    height100px;/*задаём высоту*/

    backgroundurl(imagesbottom-image1.png)no-repeat;/*указываем загруженную картинку в качестве фона псевдоэлемента*/

    }

Путь в скобках для фонового изображения у вас будет отличаться. Если вы путаетесь в этом вопросе, то вам может помочь эта статья: «Как прописать путь к файлу в HTML?»

В результате в конце указанного блока у нас добавится новый блок с изображением.


С этим читают