Как скрыть часть текста на сайте под кат и развернуть / свернуть по кнопке | HTML + CSS

Прячем текст, картинки и любой HTML под кат, добавляем волшебную кнопку "ещё". Только HTML и #CSS. Только языково-ориентированное программирование. Только хардкор!
// ----------------- Ссылки на материалы --------------- //
// ------------------------------------------------------------------------ //
// ------- Присоединиться к #BlondieCode -------- //
// ------------------------------------------------------------------------ //
// ------------------------------------------------------------------------ //
//------------ Поблагодарить за видео ----------------- //
// ------------------------------------------------------------------------ //
//-----------------------------------------------//
Больше видео на тему IT можно найти по тегу #ityoutubersru

[unprogrammer-pxul]

Отличное пояснение, до сих пор актуально! Благодарствую!))

[vvks]

Спасибо, круто получилось, воспользовался твоим кодом. В видео объяснения понятны!

[zxsvhbu]

Спасибо за видео и за комментарии, очень полезно!

[vladosononame]

Знал об этом но не додумался так применить лайк

[igorkhotylev]

исходники пощупал поломал и использовал😎спасибо

[azh]

Отличное обучающее видео с котом под катом.

[МаксимЕкимов-юс]

Спасибо за видео)) Все работает! Вопрос! Можно ли в данном примере добавить плавности при раскрытии?

[dedlive]

А отчего в примере так неприятно дёргается весь блок при нажатии кнопки More/Less? Меняется ширина? Зачем?

[gatrianL]

css конечно хорошо, но в данном случае лучше js сделать, потому как если смотреть на html код то получается куча костылей), и валидацию такой код не пройдет

[kawaikaino]

Круто! Знал об этом, в любом случае Спасибо

[ДмитрийАйткулов]

Люблю смотреть как бэки верстают цветная каппа

[PhilippeRigovanov]

*👍🏻Я тоже в вёрстке, где это возможно, ухожу от JS*

[DreamingDolphing]

Наверное это даже можно не считать хаком, потому что кастомные чекбоксы примерно по такому же принципу стилизуются.

[КостянЕрмаков-ею]

Текст под псевдоэлементом, которому добавили opacity: 0, будет невозможно выделить (если он будет под картинкой кота).

[ivankrashevskyi]

Интересно, только когда делаешь подобные вещи не плохо бы еще чтобы плавность была, потому как делаешь под заказ что то подобное часто это требуют

[Алексей-плн]

Умничка! Но как мне показалось на js все же это было бы проще.

[Ogr]

Здравствуйте.
Вы в своих роликах упоминали, что владеете пятью языками.
Это в принципе неплохой уровень даже для филолога, а вы ведь программист )
Можете что-то посоветовать, поделиться какими-то методическими приемами, к которым пришли в процессе освоения новых языков?

[ДарьяПосадская]

Очень полезное видео, подписалась на Ваш канал. Ещё хотелось бы спросить совет. Я только начала изучать программирование на html, js, css, php по самоучителям. Можно ли создать сайт бесплатно, без хостингов, с нуля? Если можно, то как? А то везде советуют хостинги и конструкторы сайтов. Заранее спасибо за ответы

[ЕвгенийКоновалов-хо]

Прикольно! Аида, на курсах по вёрстке нас учили ничего не писать в псевдоэлементах, типа "more" так как может потребоваться допустим мультиязычный сайт и тогда это проблема. Возможно Вы знаете решение и для этого случая?

[kv]

Решение часто применяемое теми кто боится js но заморочка полная гора не нужного кода, css файл раздутый ну парка одним словом, видос полезный но только для того что бы ознакомится знать что так можно но на практике не применять !