Форум программистов, компьютерный форум, киберфорум
Наши страницы

HTML, CSS

Войти
Регистрация
Восстановить пароль
 
nataly_p_v
0 / 0 / 0
Регистрация: 31.07.2014
Сообщений: 16
#1

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

03.08.2014, 13:11. Просмотров 762. Ответов 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):

Псевдоэлементы :after :before - HTML, CSS
<!DOCTYPE html> <html> <head> <title>Нестандартные тени</title> <meta charset="utf-8"> <base...

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

Не работают вместе 2 скрипта вместе - jQuery
Добрый день! подскажите как заставить работать эти 2 скрипта вместе? Работают только по отдельности $(document).ready(function(){ ...

Чиним вместе - Flash-память
TakeMS 16Gb Easy II Black третий час ломаю голову. не знаю что уже делать. буду благодарен вашей помощи!!!! скрины ниже.

Учимся вместе - C++
Ребят, всем привет! Недавно понял что жизнь моя скучна и уныла, и что пора ее чем нибудь разнообразить, и выбор пал на с++. Объяснить...

Не работают вместе.. - C++ Builder
Я пишу программу - игрушку "Виселица". Из файла открываю словарь и рандомно выбираю одно из слов, которое будет в игре. По идее, при...

6
etalord
работяга
365 / 365 / 36
Регистрация: 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 / 0
Регистрация: 31.07.2014
Сообщений: 16
04.08.2014, 15:06  [ТС] #4
Спасибо ребята, но вы написали то, что я и так знаю. Суть вопроса в другом.

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

Я пробовала, у меня не получилось, я хочу разобраться почему. Пожалуйста, не надо копировать статью из учебника "про псевдоэлементы". Перед тем как создать тему, я много их прочитала.
0
Sabio
57 / 57 / 13
Регистрация: 24.06.2013
Сообщений: 265
04.08.2014, 15:45 #5
nataly_p_v, насколько мне известно, нельзя.
0
aj17
234 / 225 / 107
Регистрация: 02.06.2014
Сообщений: 854
04.08.2014, 16:51 #6
Лучший ответ Сообщение было отмечено автором темы, экспертом или модератором как ответ
Я бы на вашем месте сделал бы 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 / 0
Регистрация: 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
Привет! Вот еще темы с ответами:

Радуемся вместе - C++
теперь серия компилей GCC по умолчанию требует компилятор g++. Что не может не радовать адептов ООП, вроде Nixman, Dani и т.д., и что...

Соберем вместе - Офисный компьютер
Привет всем . Читал много споров и обзоров, и все таки я решил остановиться на процессе AMD. Но есть одна проблема я не могу подобрать...

Соображаем вместе) - PHP
Есть небольшая табличка в базе id pid name 1 null Москва 2 null Область 3 1 САО 4 1 ВАО 5 2...

Изучаем ACE вместе! - C++
Здравствуйте! Недавно начал изучать программирование сетевых приложений. Изучать в принципе и на C++ в частности. В руках у меня пока...


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

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

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