Ну лучше span скрыть совсем:

На всякий случай оставил))

kolobdur74
может стоит добавить к CSS трюки ?

Отредактировано Lidia-Lada (Вт, 9 Май 2017 20:12:23)

Аналог скриптовой реализации - на чистом CSS

Картинки OnLine/OffLine в Профиле в топике

В HTML верх (или в Конец Второго окна стилей, вынув из тегов <style>)

Обновлено 28.06.2017 (убрана иконка у Гостей)

CSS -растягивающаяся рамка картинкой на Аватар
(в данном случае уголки цветом)

В HTML верх (или в Конец Первого окна стиля без тегов <style></style>)

Красным - толщина рамки!

Я бы к этому добавила:
    position: absolute;
Чтобы текст :before накладывался поверх того, который невидимый. Но не знаю для всех ли стилей подойдет.

Хак для опускания вниз рейтинга в посту:

<!-- Хак для опускания вниз рейтинга в посту -->
<style>
.post>.container {
display: grid;
grid-template-areas: "author body" "links links";
grid-template-rows: auto auto;
grid-template-columns: auto 1fr;
}

.post-author {
grid-area: author;
float: none !important;
}

.post-body {
grid-area: body;
margin-left: 0 !important;
padding: 1em !important;
}
 
.post-links {
grid-area: links;
}
 
.post-author, .post-body {word-wrap: break-word;}
 
.post-box {
display: grid;
grid-template-areas: "content content" "vote rating";
grid-template-rows: 1fr auto 0;
grid-template-columns: 1fr auto;
height: 100%;
padding: 0 !important;
}
 
.post-content {grid-area: content;}
.post-rating {grid-area: rating;}
.post-vote {grid-area: vote;float: right;}
</style>

Добавка/Правка для мобильного стиля:

<style>
@media screen and (max-width: 540px) {
.post>.container {
grid-template-areas: "author" "body" "links";
grid-template-rows: auto auto auto;
grid-template-columns: auto;
}
}
</style>

Возможно придется перекрашивать фон в некоторых стандартных дизайнах, потому что я поменял паддинг местами из внутреннего контейнера в контейнер родителя, то есть из post-box в post-body - в нем сидел баг, который ломал хак..

P.S. По поводу grid - у него есть особенность сочетания ширины и высоты в процентах и padding.. grid считает 100% + padding, а не 100% включая padding, поэтому может выходить за рамки контейнера родителя..

Отредактировано kolobdur74 (Пн, 15 Апр 2019 21:30:06)

В этом:

Абсолют гуляет, особенно в мобильных устройствах.. Мой вариант не на абсолюте, не гуляет..

А при большом? Если помнишь я первый вариант тоже сделал на абсолюте, но абсолют как имел недостатки так и имеет.. Вообщем то главная проблема была в том, что дочерний блок не расширяется на высоту родительского блока, с помощью грида я эту проблему решил.. Можно еще решить это через флекс, но я от него все таки отказался - через флекс все таки больше пришлось бы переделывать, грид в данном случае был удобнее.. Других вариантов заменить абсолют я не нашел..

Но есть и недостатки - старые браузеры до 2016 года грид не поддерживают, возможно не поддерживают и некоторые китайские браузеры..

Отредактировано kolobdur74 (Пн, 22 Апр 2019 20:28:45)

По поводу проблемы (абракадабры) кириллицы в псевдоэлемнтах :after и :before в Своем стиле, надо добавить в Цвета style_cs.css в самый верх:

Вроде помогает..

Если не помогает, то лучше использовать такой код:

В самый верх в оба поля Своего стиля:

@charset "Windows-1251";

Отредактировано kolobdur74 (Пт, 21 Фев 2020 13:56:47)