Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.73/11: Рейтинг темы: голосов - 11, средняя оценка - 4.73
0 / 0 / 0
Регистрация: 23.07.2015
Сообщений: 10
1

Вывод элемента :after в одной строке с последним словом

15.06.2017, 14:04. Показов 2155. Ответов 7
Метки нет (Все метки)

Есть код:
HTML5
1
<h1 class="uk-article-title">Lewis Carroll and photography</h1>
И CSS:
CSS
1
2
3
4
5
6
.uk-article-title:after {
    display: inline-block;
    content: "";
    height: 15px;
    width: 15px;
    background: #ef0000;}
То есть выводит квадрат красный после заголовка.
Есть ли вариант сделать чтоб он переносился на новую строку только вместе с словом "photography"?
Через псевдоклас :last-child или :nth-last-of-type
__________________
Помощь в написании контрольных, курсовых и дипломных работ здесь
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
15.06.2017, 14:04
Ответы с готовыми решениями:

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

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

Дана строка, поменять первое слово в строке с последним словом
Это код на Паскале. есть ли аналогии copy и delete в c++? Подскажите как лучше написать код на...

Добавить к началу первой строки все символы второго строке между первым и последним словом
Добавить к началу первой строки все символы второго строке между первым и последним словом ...

7
Модератор
Эксперт JSЭксперт HTML/CSS
3819 / 2670 / 1520
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
15.06.2017, 14:44 2
Заворачивайте последнее слово в span и работайте уже с его псевдоэлементом
HTML5
1
<h1>Lorem ipsum dolor sit amet, <span>consectetur</span></h1>
CSS
1
2
3
4
5
6
7
8
9
10
h1 span {
  white-space: nowrap;
}
h1 span:after {
  display: inline-block;
  content: "";
  height: 15px;
  width: 15px;
  background: #ef0000;
}
0
0 / 0 / 0
Регистрация: 23.07.2015
Сообщений: 10
15.06.2017, 14:52  [ТС] 3
Если бы можно было))
Это не статичный сайт. Все работает через CMS. Так что надо как то через псевдоэлементы)
0
Модератор
Эксперт JSЭксперт HTML/CSS
3819 / 2670 / 1520
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
15.06.2017, 15:45 4
Строка или переносится, или не переносится. Добавляйте span или при помощи js, или как-то при формировании элемента на странице.
0
0 / 0 / 0
Регистрация: 23.07.2015
Сообщений: 10
15.06.2017, 15:47  [ТС] 5
Через css3 можно работать и присваивать стили к определенным частям. То есть сделать определенные строки таблицы другого цвета или сделать последний параграф другого цвета. Вот и хотел узнать можно ли так же сделать для последнего слоя в абзаце или заголовке
0
Модератор
Эксперт JSЭксперт HTML/CSS
3819 / 2670 / 1520
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
15.06.2017, 16:02 6
Можно задать псевдоэлементу абсолютное позиционирование и прижать его к нижней и правой границам h1. И тогда ваш квадратик будет всегда напротив последней строки, но не думаю, что это вам подходит.
1
0 / 0 / 0
Регистрация: 23.07.2015
Сообщений: 10
15.06.2017, 16:43  [ТС] 7
CSS
1
2
3
4
5
6
7
8
9
.uk-article-title:after {
    display: inline-block;
    content: "";
    position: absolute;
    height: 15px;
    width: 15px;
    background: #ef0000;
    margin-left: 10px;
}
Но он прилип к потолку [del]
Вывод элемента :after в одной строке с последним словом


Что то надо еще прописать...
0
Модератор
Эксперт JSЭксперт HTML/CSS
3819 / 2670 / 1520
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
15.06.2017, 16:47 8
Лучший ответ Сообщение было отмечено lalalag как решение

Решение

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.uk-article-title {
  position: relative;
  padding-right: 20px;
  box-sizing: border-box;
}
.uk-article-title:after {
  content: "";
  position: absolute;
  height: 15px;
  width: 15px;
  right: 0;
  bottom: 0;
  background: #ef0000;
}
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
15.06.2017, 16:47

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

Найти самое длинное слово, начинающееся с согласной буквы, и поменять его с последним словом в строке (Pascal -> Python)
Дана строка символов.Найти самое длинное слово начинающееся с согласной буквы и поменять его с...

Вывод результата замены минимального элемента массива с последним
По заданию надо заменить минимальный по модулю положительный элемент массива последним элементом....

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


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

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

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2022, CyberForum.ru