require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");
$APPLICATION->SetTitle("Preview");
?><!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<style>
body { font-family: Georgia, serif; max-width: 720px; margin: 40px auto; padding: 0 20px; background: #fafaf8; color: #333; line-height: 1.8; }
h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 2px; color: #999; margin: 40px 0 12px; border-top: 1px solid #eee; padding-top: 20px; }
.block { background: #fff; padding: 24px 28px; border-radius: 4px; margin-bottom: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
/* === Вариант 1: Ваш текущий (underline при hover) === */
.v1 a { color: #2285c4; text-decoration: none; }
.v1 a:hover { text-decoration: underline; }
/* === Вариант 2: Пунктирная → сплошная (ваш предложенный) === */
.v2 a { color: #c49a6c; text-decoration: none; border-bottom: 1px dashed #c49a6c; }
.v2 a:hover { border-bottom: 1px solid #c49a6c; }
/* === Вариант 3: Подчёркивание через border с анимацией === */
.v3 a { color: #2285c4; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .25s; }
.v3 a:hover { border-bottom-color: #2285c4; }
/* === Вариант 4: Фоновая подсветка === */
.v4 a { color: #1a6e3a; text-decoration: none; background: linear-gradient(#b8f0c8, #b8f0c8) no-repeat 0 100% / 0% 2px; transition: background-size .3s; padding-bottom: 1px; }
.v4 a:hover { background-size: 100% 2px; }
/* === Вариант 5: Полная подсветка текста === */
.v5 a { color: #2285c4; text-decoration: none; background: transparent; transition: background .2s, color .2s; padding: 0 2px; border-radius: 2px; }
.v5 a:hover { background: #2285c4; color: #fff; }
</style>
</head>
<body>
<h2>Вариант 1 — текущий (underline при наведении)</h2>
<div class="block v1">
<p>Выбирая шторы для спальни, важно учитывать освещённость комнаты.
<a href="#">Здесь можно посмотреть реальные примеры штор для спальни →</a>
Плотные блэкаут-шторы подходят для тех, кто любит спать в полной темноте.</p>
</div>
<h2>Вариант 2 — пунктир → сплошная линия (ваш предложенный)</h2>
<div class="block v2">
<p>Выбирая шторы для спальни, важно учитывать освещённость комнаты.
<a href="#">Здесь можно посмотреть реальные примеры штор для спальни →</a>
Плотные блэкаут-шторы подходят для тех, кто любит спать в полной темноте.</p>
</div>
<h2>Вариант 3 — граница появляется при наведении (плавно)</h2>
<div class="block v3">
<p>Выбирая шторы для спальни, важно учитывать освещённость комнаты.
<a href="#">Здесь можно посмотреть реальные примеры штор для спальни →</a>
Плотные блэкаут-шторы подходят для тех, кто любит спать в полной темноте.</p>
</div>
<h2>Вариант 4 — анимированная линия снизу</h2>
<div class="block v4">
<p>Выбирая шторы для спальни, важно учитывать освещённость комнаты.
<a href="#">Здесь можно посмотреть реальные примеры штор для спальни →</a>
Плотные блэкаут-шторы подходят для тех, кто любит спать в полной темноте.</p>
</div>
<h2>Вариант 5 — подсветка фона при наведении</h2>
<div class="block v5">
<p>Выбирая шторы для спальни, важно учитывать освещённость комнаты.
<a href="#">Здесь можно посмотреть реальные примеры штор для спальни →</a>
Плотные блэкаут-шторы подходят для тех, кто любит спать в полной темноте.</p>
</div>
</body>
</html>