Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
nataly_p_v
0 / 0 / 2
Регистрация: 31.07.2014
Сообщений: 16
#1

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

03.08.2014, 13:11. Просмотров 803. Ответов 6
Метки нет (Все метки)

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

Вопрос возник в связи с тем, что надо сделать блок с содержимым, в нем я сделала заголовок с помощью :before а под заголовком нужно нарисовать маленький треугольник. Можно ли написать что-то вроде .main:before:after{} ?
Будьте добры, проясните ситуацию. Заранее большое спасибо.
0
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
03.08.2014, 13:11
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Псевдоэлементы :after и :before вместе? (HTML, CSS):

Псевдоэлементы :before и :after
Как строить элементы с помощью псевдоклассов :before и :after?

Псевдоэлементы before and after
Вопрос в следующем: можно ли через псевдоэлементы прикрепить полноценную...

Псевдоэлементы :after :before
<!DOCTYPE html> <html> <head> <title>Нестандартные тени</title> ...

Почему z-index отрицательный и положительный по-разному действуют на псевдоэлементы?
Здравствуйте! Бился сегодня над решением создать через ::before декоративный...

Запуск ПК, а вместе с ним и google chrome вместе с вкладкой akisho
Сначала была стартовая страница time to read, и поиск go search, потом...

Не работают вместе 2 скрипта вместе
Добрый день! подскажите как заставить работать эти 2 скрипта вместе? Работают...

6
etalord
работяга
366 / 366 / 52
Регистрация: 23.05.2010
Сообщений: 947
03.08.2014, 13:31 #2
Что мешает взять и попробовать? ))
CSS
1
2
.main:after {}
.main:before {}
0
dimadyak
8 / 8 / 6
Регистрация: 08.04.2014
Сообщений: 54
03.08.2014, 13:57 #3
как то так
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.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>
0
nataly_p_v
0 / 0 / 2
Регистрация: 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
aj17
280 / 271 / 153
Регистрация: 02.06.2014
Сообщений: 1,015
04.08.2014, 16:51 #6
Лучший ответ Сообщение было отмечено nataly_p_v как решение

Решение

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

Добавлено через 37 минут
CSS
1
2
3
4
5
6
7
.block:after
{
content:"Заголовок";
display:inline-block;
padding-right:20px;
background:url(img.png)center right;
}
HTML5
1
<div class="block"></div>
что то типа того
1
nataly_p_v
0 / 0 / 2
Регистрация: 31.07.2014
Сообщений: 16
04.08.2014, 23:33  [ТС] #7
Большое спасибо, это сработало.
0
04.08.2014, 23:33
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
04.08.2014, 23:33
Привет! Вот еще темы с решениями:

1.5V вместе с 1.35V
Здравствуйте. У меня ноутбук HP Pavilion dm1-4300sr. Два слота памяти. В одном...

Соображаем вместе)
Есть небольшая табличка в базе id pid name 1 null Москва 2 ...

Не работают вместе..
Я пишу программу - игрушку &quot;Виселица&quot;. Из файла открываю словарь и рандомно...

Соберем вместе
Привет всем . Читал много споров и обзоров, и все таки я решил остановиться на...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru