Css after кроме последнего

::after (:after)

В CSS ::after создает псевдоэлемент, который является последним дочерним элементом выбранного элемента. Он часто используется для добавления косметического контента в элемент со свойством content . Это встроенный по умолчанию.

Try it

Примечание . Псевдоэлементы, созданные с помощью ::before и ::after , содержатся в блоке форматирования элемента и, следовательно, не применяются к заменяемым элементам, таким как или элементам .

Syntax

Примечание. CSS ввел нотацию ::after (с двумя двоеточиями), чтобы отличать псевдоклассы от псевдоэлементов . Для обратной совместимости браузеры также принимают :after , введенный ранее.

Examples

Simple usage

Создадим два класса:один-для скучных абзацев,другой-для увлекательных.Мы можем использовать эти классы для добавления псевдоэлементов в конец параграфа.

HTML

class="boring-text">Here is some plain old boring text.
 
Here is some normal text that is neither boring nor exciting.
 
class="exciting-text">Contributing to MDN is easy and fun.
 

CSS

.exciting-text::after < content: " ; color: green; > .boring-text::after < content: " ; color: red; >

Result

Decorative example

Мы можем стилизовать текст или изображения в свойстве content практически любым удобным для нас способом.

HTML

class="ribbon">Look at the orange box after this text. 

CSS

.ribbon < background-color: #5BC8F7; > .ribbon::after < content: "This is a fancy orange box."; background-color: #FFBA10; border-color: black; border-style: dotted; >

Result

Tooltips

В этом примере для создания всплывающих подсказок используется ::after в сочетании с CSS-выражением attr() и пользовательским атрибутом data-descr . JavaScript не требуется!

Мы можем также поддерживать пользователь клавиатуры с этой техникой, путем добавления tabindex от 0 , чтобы каждый span клавиатуры Focusable, и с помощью CSS :focus выбора. Это показывает, насколько гибкими могут быть ::before и ::after , хотя для наиболее доступного опыта виджет семантического раскрытия, созданный каким-либо другим способом (например, с элементами подробностей и резюме ), вероятно, будет более подходящим.

HTML

p>Here we have some span tabindex="0" data-descr="collection of words and punctuation">text span> with a few span tabindex="0" data-descr="small popups that appear when hovering">tooltips span>. p> 

CSS

span[data-descr] < position: relative; text-decoration: underline; color: #00F; cursor: help; > span[data-descr]:hover::after, span[data-descr]:focus::after < content: attr(data-descr); position: absolute; left: 0; top: 24px; min-width: 200px; border: 1px #aaaaaa solid; border-radius: 10px; background-color: #ffffcc; padding: 12px; color: #000000; font-size: 14px; z-index: 1; >

Result

Accessibility concerns

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

Specifications

Источник

Псевдоэлемент after и псевдокласс last-child

Для верстальщика псевдоэлементы и псевдоклассы – незаменимые помощники и я вам это сейчас докажу на примере фрагмента PSD макета.

Дизайнеры очень любят разделять пункты меню разными символами, ставя в тупик неопытных верстальщиков. Начинающий верстальщик, наверняка попался бы на удочку и вслед за текстом, понатыкал бы разделители.

В результате мы увидели бы следующую разметку в HTML-документе, как на картинке ниже.

Такой нехитрый способ конечно же работает, но он сильно засоряет код, а практической пользы для семантики от кучи span-ов, никакой нет.

Правильный способ

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

Псевдоэлемент after в CSS стилях

Мы видим определенную закономерность, что за каждым пунктом меню, стоит разделитель, значит применяться псевдоэлемент after будет к тегу li.

Символ вертикальная линия имеет следующий код — «\007C». Откуда мы узнали? Из таблицы символов Юникода.

Не забудьте убрать дефолтные стили маркеров, круглые точки!

Запишем номер в Юникоде в свойство content.

nav ul li::after content: «\007C»; /* юникод вертикальная линия */
color: #fff; /* поменять цвет */
font-weight: bold; /* поменять жирность */
position: relative;
padding-left: 4px; /* выравнивание относительно текста по гориз. */
top: -2px; /* выравнивание относительно текста по верт. */
>

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

Псевдокласс last-child

Псевдокласс last-child позволяет задать отдельные стили для последнего элемента, в нашем случае – для последнего псевдоэлемента. Мы просто указываем пустое значение у свойства content и последняя линия пропала.

nav ul li:last-child::after <
content: «»;
>

Заключение

Для использования символов Юникода, кодировка страницы должна обязательно быть UTF-8.

Как понять, в каком случае нужно верстать с псевдоэлементами? Все элементы оформления и украшательства, находящиеся до или после основных элементов. Сейчас редко какой дизайн-макет обходится без необходимости, применять в верстке псевдоэлементы и псевдоклассы.

В этогм видео-курсе «HTML5 и CSS3 с Нуля до Гуру»вы увидите на простых примерах, как верстаются сайты.

Создано 18.01.2019 10:35:15

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

Источник

Как убрать последний псевдоэлемент before / after?

Добрый день.
Столкнулся с проблемой убрать последний псевседоэлемент.
Пробовал следующие варианты:

.program-week__item-text-mobile :not(:last-child)::after,
.program-week__item-text-mobile + .program-week__item-text-mobile,
.program-week__item-text-mobile:last-child:after content: «»;
>
.program-week__item-text-mobile:last-child:after display: none;
>

Убирает или все псевдоэлементы или вообще никакой.

 
 
 
Неделя №1
 
 
Красивая часть курса, которая помогает в успехе
 
 
 
 
Неделя №2
 
 
Красивая часть курса, которая помогает в успехе
 
 
 
 
Неделя №3
 
 
Красивая часть курса, которая помогает в успехе
 
 
 
 
Неделя №4
 
 
Красивая часть курса, которая помогает в успехе
 
 
 
 
Неделя №5
 
 
Красивая часть курса, которая помогает в успехе
 
 
 
 
Неделя №6
 
 
Красивая часть курса, которая помогает в успехе
 
 
 
 
Неделя №7
 
 
Красивая часть курса, которая помогает в успехе
 
 
 

program-week__item-title-mobile < font-size: 14px; line-height: 160%; opacity: 0.5; margin-bottom: 15px; >.program-week__item-title-mobile, .program-week__item-text-mobile < text-align: center; >.program-week__item-text-mobile < position: relative; & ::after < content: ""; position: absolute; width: 6px; height: 30px; background: linear-gradient(94.26deg, #c89afc 9.51%, #7c6afa 90.23%); top: 40px; right: 50%; >> .program-week__item-text-mobile

Источник

::after

In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

Try it

Note: The pseudo-elements generated by ::before and ::after are contained by the element’s formatting box, and thus don’t apply to replaced elements such as , or to elements.

Syntax

Note: CSS introduced the ::after notation (with two colons) to distinguish pseudo-classes from pseudo-elements. For backward compatibility, browsers also accept :after , introduced earlier.

Examples

Simple usage

Let’s create two classes: one for boring paragraphs and one for exciting ones. We can use these classes to add pseudo-elements to the end of paragraphs.

HTML

p class="boring-text">Here is some plain old boring text.p> p>Here is some normal text that is neither boring nor exciting.p> p class="exciting-text">Contributing to MDN is easy and fun.p> 

CSS

.exciting-text::after  content: " ; color: green; > .boring-text::after  content: " ; color: red; > 

Result

Decorative example

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

HTML

span class="ribbon">Look at the orange box after this text. span> 

CSS

.ribbon  background-color: #5bc8f7; > .ribbon::after  content: "This is a fancy orange box."; background-color: #ffba10; border-color: black; border-style: dotted; > 

Result

Tooltips

This example uses ::after , in conjunction with the attr() CSS expression and a data-descr custom data attribute, to create tooltips. No JavaScript is required!

We can also support keyboard users with this technique, by adding a tabindex of 0 to make each span keyboard focusable, and using a CSS :focus selector. This shows how flexible ::before and ::after can be, though for the most accessible experience a semantic disclosure widget created in some other way (such as with details and summary elements) is likely to be more appropriate.

HTML

p> Here we have some span tabindex="0" data-descr="collection of words and punctuation"> text span> with a few span tabindex="0" data-descr="small popups that appear when hovering"> tooltipsspan >. p> 

CSS

span[data-descr]  position: relative; text-decoration: underline; color: #00f; cursor: help; > span[data-descr]:hover::after, span[data-descr]:focus::after  content: attr(data-descr); position: absolute; left: 0; top: 24px; min-width: 200px; border: 1px #aaaaaa solid; border-radius: 10px; background-color: #ffffcc; padding: 12px; color: #000000; font-size: 14px; z-index: 1; > 

Result

Accessibility concerns

Using an ::after pseudo-element to add content is discouraged, as it is not reliably accessible to screen readers.

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Feb 21, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник