Псевдоэлементы :after и :before вместе?

@nataly_p_v · Регистрация: 31.07.2014

Author24 — интернет-сервис помощи студентам

Привет всем участникам форума. Пожалуйста объясните кто знает можно ли объединять псевдоэлементы :after и :before в одну конструкцию? и будет ли она работать? Искала в просторах интернета, натыкаюсь только на объяснения что за элементы, и как работают, а ответа на свой вопрос не нахожу.

Вопрос возник в связи с тем, что надо сделать блок с содержимым, в нем я сделала заголовок с помощью :before а под заголовком нужно нарисовать маленький треугольник. Можно ли написать что-то вроде .main:before:after{} ?
Будьте добры, проясните ситуацию. Заранее большое спасибо.

@etalord · 03.08.2014, 13:31

Что мешает взять и попробовать? ))

CSS

1 2	.main:after {} .main:before {}

@dimadyak · 03.08.2014, 13:57

как то так

CSS

.block-s-sodergimim {
  position: relative;
  width: 300px;
  min-height:150px;
  border:1px solid #000;
}
 
.block-s-sodergimim:before {
  content:"Какой-то заголовок";
  position: absolute;
  top: 1px;
  left: 20px;
  font:bold 24px Tahoma;
  color:orange;
}
.block-s-sodergimim:after {
  content:"";
  position: absolute;
  top: 31px;
  left: 40px;
  border:30px solid transparent;
  border-top:30px solid red;
}

HTML5

1	<div class="block-s-sodergimim"></div>

@nataly_p_v · 04.08.2014, 15:06 **[ТС]**

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

Вот есть блок<div> а есть его контент. Я делаю блоку заголовок 40 px желтенький с помощью before все отлично становится, а еще я хочу добавить к этому 40-пиксельному заголовку маленький треугольник такого же цвета с боку. Я могу использовать after который будет не после контента и после before? бывает псевдоэлемент после псевдоэлемента?

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

@Sabio · 04.08.2014, 15:45

nataly_p_v, насколько мне известно, нельзя.

@aj17 · 04.08.2014, 16:51

Я бы на вашем месте сделал бы padding с нужной стороны для псевдоэлемента, и положил бы туда фон. Думаю так работать будет)

Добавлено через 37 минут

CSS

.block:after
{
content:"Заголовок";
display:inline-block;
padding-right:20px;
background:url(img.png)center right;
}

HTML5

1	<div class="block"></div>

что то типа того

@nataly_p_v · 04.08.2014, 23:33 **[ТС]**

Большое спасибо, это сработало.

@nataly_p_v 0 / 0 / 0 Регистрация: 31.07.2014 Сообщений: 16
		1
	Псевдоэлементы :after и :before вместе? 03.08.2014, 13:11. Показов 2679. Ответов 6 Метки нет (Все метки) Привет всем участникам форума. Пожалуйста объясните кто знает можно ли объединять псевдоэлементы :after и :before в одну конструкцию? и будет ли она работать? Искала в просторах интернета, натыкаюсь только на объяснения что за элементы, и как работают, а ответа на свой вопрос не нахожу. Вопрос возник в связи с тем, что надо сделать блок с содержимым, в нем я сделала заголовок с помощью :before а под заголовком нужно нарисовать маленький треугольник. Можно ли написать что-то вроде .main:before:after{} ? Будьте добры, проясните ситуацию. Заранее большое спасибо. 0

@nataly_p_v 0 / 0 / 0 Регистрация: 31.07.2014 Сообщений: 16
	04.08.2014, 15:06 [ТС]	4
	Спасибо ребята, но вы написали то, что я и так знаю. Суть вопроса в другом. Вот есть блок<div> а есть его контент. Я делаю блоку заголовок 40 px желтенький с помощью before все отлично становится, а еще я хочу добавить к этому 40-пиксельному заголовку маленький треугольник такого же цвета с боку. Я могу использовать after который будет не после контента и после before? бывает псевдоэлемент после псевдоэлемента? Я пробовала, у меня не получилось, я хочу разобраться почему. Пожалуйста, не надо копировать статью из учебника "про псевдоэлементы". Перед тем как создать тему, я много их прочитала. 0

@Sabio 57 / 57 / 14 Регистрация: 24.06.2013 Сообщений: 265
	04.08.2014, 15:45	5
	nataly_p_v, насколько мне известно, нельзя. 0

@nataly_p_v 0 / 0 / 0 Регистрация: 31.07.2014 Сообщений: 16
	04.08.2014, 23:33 [ТС]	7
	Большое спасибо, это сработало. 0

Псевдоэлементы :after и :before вместе?

Решение