Как сделать слева пункта свечение границы

@TVPNERO · Регистрация: 29.03.2016

Студворк — интернет-сервис помощи студентам

В макете свечение границы должно быть как на скрине. А у меня на сайте получилось как то не похоже. Адрес сайта: http://www.ross.ho.ua

Как я сделал на сайте:

Как сделать слева пункта свечение границы

Вот макет:

@mrtoxas · 28.10.2016, 10:53

Да по-разному. Когда вы уже будете код прикладывать?

CSS
1
2
3
4
5
6
.block{
  padding:20px 5px 0 5px;
  box-sizing: border-box;
  border-left: 2px solid darkblue;
  border-top: 1px solid darkblue;
}

HTML5
1
2
3
<div class="block">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, deserunt.
</div>

@TVPNERO · 28.10.2016, 15:02 **[ТС]**

mrtoxas,

вот код

HTML5
1
2
3
4
<ul class="list_prenuws">
<li id="firstlinews" style="color: grey;">Что такое "Аxel-Helberg"? </li><br>
<li id="liprevnews">Покупка фирмы в готовом формате </li>
</ul>

CSS
1
2
3
4
5
6
7
8
9
10
.list_prenuws {
    list-style: none;
    position: relative;
        color: #4f748f;
    font-size: 23px;
}
 
#liprevnews:hover {
    border-left: 8px solid #1f5577;
}

http://codepen.io/anon/pen/dpEKOP

Добавлено через 9 минут
mrtoxas, нет у вас тоже левая граница к верхней границе доходит.

а на макете левая граница идет по высоте строки где то на 19 пикселов.
левая граница не должна доходить к верхней серой границе на начале темы я прикрепил ссылку на сайт там можно посмотреть как я сделал--моя левая граница тоже доходит к верхней

@mrtoxas · 28.10.2016, 15:15

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.list_prenuws {
  list-style: none;
  position: relative;
  color: #4f748f;
  font-size: 23px;
  padding:0;
  margin:0;
}
#firstlinews{
  padding-left:20px;
}
 
#liprevnews {
  padding-top: 29px;
  padding-left:10px;
  margin-top:29px;
  border-top:1px solid #1f5577;
  border-left: 8px solid transparent;
}
#liprevnews:hover{
  border-left: 8px solid #1f5577;
}

И уберите <br> из списка. Вы если учитесь, то в код сайта, ссылку которого привели, лучше не смотрите.

@TVPNERO · 28.10.2016, 20:25 **[ТС]**

mrtoxas, все так же --->у вас тоже левая граница к верхней границе доходит.

как видите я на начале темы прикрепил скрин макета где видно что подсвечиваемая грпница не должна
доходить к верхней линии.

@Fedor92 · 28.10.2016, 20:44

TVPNERO, может так?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        ul{
            list-style: none;
            position: relative;
            color: #4f748f;
            font-size: 23px;
        }
        li{position:relative; padding:0 10px; margin:10px 0}
        li:hover:before{
            content:"";
            position:absolute;
            top:50%;
            margin-top:-8px;
            left:0;
            width:6px;
            height:16px;
            background: #0000ff
        }
        a{text-decoration: none}
    </style>
</head>
<body>
    <ul>
        <li><a href="#">ITEM - 1</a></li>
        <li><a href="#">ITEM - 2</a></li>
        <li><a href="#">ITEM - 3</a></li>
        <li><a href="#">ITEM - 4</a></li>
        <li><a href="#">ITEM - 5</a></li>
    </ul>
</body>
</html>

@TVPNERO · 28.10.2016, 21:16 **[ТС]**

Fedor92,
Благодарю.
Да оно.Только не пойму за счет чего появляется левая граница без--border-left

За счет чего появляется ??

@Fedor92 · 28.10.2016, 21:18

Сообщение от TVPNERO

За счет чего появляется ??

С помощью псевдоэлемента :before

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@TVPNERO 9 / 8 / 12 Регистрация: 29.03.2016 Сообщений: 1,154

	Как сделать слева пункта свечение границы 28.10.2016, 10:34. Показов 1736. Ответов 7 Метки css, html (Все метки) В макете свечение границы должно быть как на скрине. А у меня на сайте получилось как то не похоже. Адрес сайта: http://www.ross.ho.ua Как я сделал на сайте: Вот макет: 0

@TVPNERO 9 / 8 / 12 Регистрация: 29.03.2016 Сообщений: 1,154
	28.10.2016, 20:25 [ТС]
	mrtoxas, все так же --->у вас тоже левая граница к верхней границе доходит. как видите я на начале темы прикрепил скрин макета где видно что подсвечиваемая грпница не должна доходить к верхней линии. 0

@TVPNERO 9 / 8 / 12 Регистрация: 29.03.2016 Сообщений: 1,154
	28.10.2016, 21:16 [ТС]
	Fedor92, Благодарю. Да оно.Только не пойму за счет чего появляется левая граница без--border-left За счет чего появляется ?? 0

Как сделать слева пункта свечение границы

Решение