Бро!

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

Сделаем так: при наведении на название раздела под текстом плавно выедет сиреневая полоска от центра в стороны, как будто заголовок делает Вау и показывает, что тут важно. Ничего мистического, подключаем модный шрифт и пару CSS-правил , и интерфейс сразу смотрится дороже.

Разберём код по шагам.

Я пройдусь по каждой строчке и объясню, зачем она нужна и что с ней можно содеять, чтобы подстроить эффект под твой вкус.

Погнали......

Код

<!-- Подключаем библиотеку, красивый шрифт Poppins из Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap" rel="stylesheet">

<style>
/* Стили для названий разделов (ipsType_pagetitle — стандартный класс uCoz/IPS) */
.ipsType_pagetitle {
  position: relative;            /* даём возможность позиционировать псевдоэлемент (::after) относительно этого блока */
  display: inline-block;         /* делаем заголовок строчно-блочным, чтобы ширина была по тексту */
  color: #2b2b2b;                /* цвет текста — тёмно-серый (почти асфальтовый) */
  font-family: 'Poppins', sans-serif; /* используем модный шрифт Poppins */
  font-weight: 400;              /* обычное начертание (не жирный) */
  font-size: 14px !important;    /* размер шрифта, !important перебивает стандартные стили uCoz */
  padding-bottom: 4px;           /* небольшой отступ снизу, чтобы линия не прилипала к буквам */
  cursor: pointer;               /* меняем курсор на «указатель» при наведении */
  transition: color 0.3s ease;   /* плавный переход цвета текста (если бы он менялся) */
}

/* Псевдоэлемент — это сама линия под текстом */
.ipsType_pagetitle::after {
  content: '';                   /* создаём пустой элемент (без текста) */
  position: absolute;            /* позиционируем относительно заголовка */
  left: 50%;                     /* стартовая точка в центре текста */
  bottom: 0;                     /* линия у нижней границы текста */
  width: 0;                      /* изначально линия невидимая */
  height: 2px;                   /* толщина линии */
  background-color: #853b97;     /* сиреневый цвет линии */
  border-radius: 1px;            /* скругляем края линии */
  transform: translateX(-50%);   /* смещаем, чтобы линия действительно начиналась по центру */
  transition: width 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  /* анимация увеличения ширины с плавной, «пружинистой» кривой */
}

/* При наведении линия расширяется на всю ширину текста */
.ipsType_pagetitle:hover::after {
  width: 100%;                   /* линия занимает всю длину текста */
}

/* При наведении сам текст не меняет цвет (остаётся тёмно-серым) */
.ipsType_pagetitle:hover {
  color: #2b2b2b;
}
</style>

Заголовок стал аккуратным, стильным, с модным шрифтом.

При наведении курсора появляется плавная сиреневая линия, «вырастающая» из центра.

Эффект работает во всех современных браузерах и легко настраивается (можно менять цвет, толщину линии, скорость анимации).

Мурчанн

1