Как с помощью стилей поместить «readmore» после текста не меняя разметки?

Question

[r31rus]

Здравствуйте! Собственно сложилась ситуация которая не дает покоя. Нужно поместить "readmore (читать далее)" именно после текста путем стилей, не меняя разметки и структуры сайта. Тоесть сразу после окончания слова!
Страница: web-kreditor.ru/pressa
Нужно добиться такого результата именно путем стилей:
Это возможно? Как не пробовал не получается... Например задашь маргин справа, не вариант, будет фиксированный отступ, а тексты по длине-то разные и сразу все друг на друга западает.

Answer 1

[Pretor DH]

.material-news {
display: inline;
font: 12px/2.5 "Arial";
text-align: justify;
color: #464646;
}
.material-news:before {
display: block;
content: '.';
color: white;
}
.readmore-btn {
display: inline;
padding-left:1ex;
font: 12px "Arial";
}
.text-list-item-dn>br {
display: none;            /* Благодарю @laska */
}

P.S. Если у img-intro-left заменить float на Position:absolute то можно и заголовок поставить inline и не ставить залипуху с :before.

P.S.S. По коментарию, предлагаю:

.articleBody .material-news {
padding: 15px;
display: block;
}

Comments

[r31rus]

Суть в том что нужно как на примере я показал.... тоесть сразу после окончания слова... ни дальше не ближе. Нужен какой-то костылик что-ли:)

[Pretor DH]

r31rus: Если не убрать
то никак...

[r31rus]

Pretor DH: Тоесть только br убрать? Остальное менять нельзя кроме css. В этом задача

[Pretor DH]

r31rus: Только br...

[Ришат Кадыров]

Pretor DH почти дожал :(

убрать просто:

.text-list-item-dn>br {
  display: none;
}

[r31rus]

Pretor DH: Спасибо! Чуть позже проверю и отпишусь, только поужинал:)

[Pretor DH]

Ришат Кадыров: Да "СЛЕГКА" тупанул... :(

[r31rus]

Pretor DH: пятый раз редактирую текст! Сначала не получалось, все четко. Браво Вам и огромное спасибо:)

[r31rus]

Pretor DH: Только теперь сам материал чуть съехал с позиций:) То что по клику в "Readmore"

[r31rus]

Pretor DH: Вариант на дополнительный комментарий не прошел. Там-же articlebody связан с тэгом itemprop, что не является классом. Скорее микро-разметка если не ошибаюсь. Нужно что-то типа .articlebody > .material-news (padding: 15px, display:block) Опять-же articlebody это не класс......

[r31rus]

Вопрос решен!

Answer 2

[Андрей Чернышев]

В css есть псевдоэлементы :after и :before, вот они то вас и спасут

Comments

[r31rus]

не вариант, извините