Плавное подчеркивание ссылки при наведении css: Плавное подчёркивание ссылки при наведении

Оформление ссылок в CSS. Основы CSS для начинающих. Урок №11

Главная » Основы CSS » Оформление ссылок в CSS. Основы CSS для начинающих. Урок №11

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

С помощью CSS вы сможете оформить не только цвет ссылки, но убрать подчеркивание или вместо подчеркивания добавить пунктирную линию, а также сможете сделать и анимированную ссылку.

Цвет ссылки в CSS

Свойство «COLOR»
Чтобы заменить цвет ссылки воспользуйтесь свойством «color» для селектора «a».

a {color:#006400;/* цвет ссылки */}

Псевдоклассы для ссылок

Хочу познакомить вас с псевдоклассами для ссылок.
Псевдоклассы – это классы, которые определяют динамическое состояние элементов и изменяются с помощью действий пользователя.

Синтаксис:

a:имя_псевдокласса { /* стиль */}

Свойства (имена псевдоклассов):

• link — непосещенная ссылка
• visited — ссылка, которую уже посетил пользователь
• hover — состояние ссылки, на которую навели курсор мышки
• active — активная ссылка, на которую нажали

Теперь пример.
Предлагаю для примера показать стандартные ссылки, которые были добавлены через HTML без оформления CSS.

[посмотреть пример]

Теперь изменим оформление ссылок через CSS.

Добавьте вот эту ссылку в HTML код:

<a href="http://stepkinblog.ru/">STEPKINBLOG.RU</a>

Теперь вот этот код в CSS:

a {color:#006400;/* цвет ссылки */}
a:hover {color:#FF0000;/* ссылка при наведении на нее мышкой */}
a:active {color:#cccccc; /* нажатая ссылка */}

Результат:

[посмотреть пример]

Ссылка без подчеркивания

Свойство «TEXT—DECORATION»
Чтобы убрать подчеркивание у ссылки, воспользуйтесь свойством «text-decoration» со значением «none».

Свойства:

• line-through — перечеркнутый текст;
• overline — подчеркивание над текстом;
• underline  — подчеркнутый текст;
• none – без подчеркивания.

Сейчас я сделаю так, что при наведении на ссылку, подчеркивание исчезнет.

a:hover
{
text-decoration: none; /* Убираем подчеркивание у ссылки при наведении */
}

а можно сделать наоборот, чтобы вначале ссылка была не подчеркнута, а при наведении подчеркнута над текстом:

a
{
text-decoration: none; /* Убираем подчеркивание у ссылки */
}
a:hover
{
text-decoration: overline; /* Подчеркивание над ссылкой при наведении */
}

Размер ссылки

Свойство «

a:hover
{
text-decoration: none; /* Убираем подчеркивание у ссылки */
color: #cc0000; /* цвет ссылки при наведении */
font-size: 28px; /* размер ссылки при наведении */
}

Можно еще добавить к ссылке плавное увеличение (анимация):

transition:all 1s ease; /* плавное увеличение размера в 1 сек.  */

Пример:

a:hover
{
text-decoration: none; /* Убираем подчеркивание у ссылки */
color: #cc0000; /* цвет ссылки при наведении */
font-size: 28px; /* размер ссылки при наведении */
transition:all 1s ease; /* плавное увеличение размера в 1 сек. */
}

Результат:

[ посмотреть пример ]

Пунктирное подчеркивание у ссылки

Свойство «BORDER—BOTTOM»
Чтобы сделать у ссылки пунктирное подчеркивание при наведении, то вначале нужно убрать подчеркивание, а вместо подчеркивания прописать правило «border-bottom»:

a
{
text-decoration: none; /* Убираем подчеркивание у ссылки */
}
a:hover
{
text-decoration: none; /* Убираем подчеркивание у ссылки */
border-bottom:dashed;/* пунктирное подчеркивание у ссылки */
}

Результат:

[ посмотреть пример ]

Вот и все!
Жду вас на следующих уроках!

Добавить комментарий

Карта сайта tradebenefit.

tradebenefit.ru — Создаём сайт сами!

Как быстро создать сайт в интернете самому бесплатно?

Часто задаваемые вопросы по ресурсу tradebenefit.ru

Уроки HTML

Что такое html, основные понятия

Урок 1. Как создать простую страницу на html?

Урок 2. Структура html документа (страницы)

Урок 3. Заголовки и форматирование текста

Урок 4. Ссылки в html

Урок 5. Работа с изображениями в html

Урок 6. Специальные символы в html

Урок 7. Создание списков в html

Урок 8. Таблицы в html

Урок 9. Работа с формами в html

Урок 10. Форма и элементы: флажок, радиокнопка, поле

Урок 11. Элементы формы: текстовая область и список.

Урок 14. Как вставить аудио или музыку на сайт в html

Урок 15. Как вставить видео на страницу сайта средствами HTML?

Уроки CSS

Что такое CSS, основные понятия

Урок 1. Как подключить таблицу стилей CSS?

Урок 2. Селекторы и правила CSS

Урок 3. Псевдоклассы и псевдоэлементы

Урок 4. Оформление и декор текста в CSS

Урок 5. Выравнивание текста в CSS

Урок 6. Отступы и поля в CSS. Что такое margin и padding?

Урок 7. Рамка элемента CSS

Урок 8. Как установить цвет текста и фон элемента в CSS?

Урок 9. Ширина и высота в CSS

Урок 10. Плавающие элементы

Урок 11. Позиционирование в CSS

Уроки JavaScript

Что такое Java Script?

Где и как размещать код JavaScript?

Уроки jQuery

Что такое jQuery?

Как подключить библиотеку JQuery к сайту

Селекторы и фильтры jQuery

Уроки Ajax

Что такое Ajax?

Обмен данными в Ajax

Методы и свойства объекта XMLHttpRequest

Создаём объект XMLHttpRequest

Синхронная и асинхронная передача данных в Ajax

Пример работы Ajax и txt-файла

Пример работы Ajax и PHP с демонстрацией

Уроки PHP

Что такое PHP

Урок 2. Создаём первую страницу на PHP. Операторы вывода

Урок 3. Переменные в PHP

Урок 4. Комментарии в PHP

Урок 5. Условный оператор if, логические операции и сравнение в PHP

Урок 6. Циклы в PHP

Урок 7. Массивы в PHP

Урок 8. Подключение файла в PHP. Include и require

Урок 9. Что такое метод POST в PHP или как обработать форму?

Урок 10. Что такое сессии (SESSION) в PHP

11. Что такое куки (COOKIE) и как с ними работать в PHP

12. Альтернативный синтаксис управляющих конструкций PHP

Уроки MySQL

Что такое База данных? Что такое SQL и MySQL?

Урок 1. Структура Базы Данных MySQL

Урок 2. Типы полей MySQL

Урок 3. Права (привилегии) в MySQL

Урок 4. Что такое PHPMyAdmin? Начало работы

Уроки Как заработать

Как заработать деньги на своём сайте?

Как создать сайт для заработка?

Уроки Joomla

Что такое Joomla?

Уроки SEO

Что такое robots. txt ?

Что такое SEO и поисковая оптимизация?

Что такое ИЦ, ТИЦ, ВИЦ, PR?

Как правильно подобрать наиболее выгодные ключевые слова?

Копирайт в интернете. Как защитить авторский материал?

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

Как создать карту сайта sitemap?

Что такое показатель отказов и как уменьшить их количество?

Как набрать ссылочную массу сайта?

Как увеличить доход сайта с Google AdSense?

Уроки Cервисы

Текстовой редактор Notepad++

Как создать файл иконку сайта favicon.ico?

Как создать карту сайта он-лайн? Сервис xml-sitemaps.com

Он-лайн нанесение водяных знаков на изображения

Сервис хранения информации HashMem

Как выбрать веб-студию для разработки своего сайта?

Уроки Разное

Учим сочетания горячих клавиш!

Шрифты для сайта: самые популярные и используемые

Как выбрать и зарегистрировать домен?

Шрифт с иконками Font Awesome. Примеры, как установить

Бесплатные фотографии и изображения (фотобанки). Дизайнерам и web-разработчикам

Статьи по HTML

Как добавить статус Skype к себе на сайт

Метатег (meta) refresh или редирект в html

Несколько советов по тому, как правильно писать html код

Как расшифровываются теги HTML?

Как страницу своего сайта сделать для посетителя стартовой?

Как вставить SWF-файл в HTML?

Как сделать flash-баннер ссылкой?

Как проверить работу и вид сайта в разных версиях IE?

Как посмотреть исходный код страницы сайта?

Статьи по CSS

Как сделать элемент прозрачным и убрать прозрачность CSS?

Как создать div блок с прокруткой?

Направление и поворот элемента или текста CSS 3

Анимированная выдвижная боковая блок-панель на CSS

Как заменить изображение при наведении на него курсора? CSS

Как правильно создать DIV с height в 100%? CSS

Набор и примеры элементов Flat UI

Как сделать элемент чёрно-белым и обратно цветным средствами CSS?

Как сделать обтекание изображения (картинки) текстом средствами CSS?

Как изменить вид курсора мыши в CSS

Как вызвать кроссбраузерную анимацию загрузки на CSS 3?

Как закрепить футер или подвал внизу web-страницы CSS?

Как создать блок для комментария или статуса на CSS

Плавное увеличение изображения при наведении CSS

Как создать красивую всплывающую подсказку на сайте с помощью CSS?

Как расположить несколько блоков div в ряд?

Как сделать видео фоном блока на CSS?

Как создать индикатор (полосу) прокрутки страницы на CSS3?

Как изменить цвет текста-подсказки в placeholder с помощью стилей CSS?

Статьи по JavaScript

Как добавить сайт в закладки избранное? JavaScript

Как добавить комментарии от vk. com (ВКонтакте) к себе на сайт?

Как добавить на сайт виджет сообществ от vk.com?

Конфликт событий onLoad и window.onload

Кнопка распечатать страницу JavaScript print()

Текущая дата (день, месяц, год) скрипт JS

Как запретить скачивание изображений с сайта?

Как запретить копирование текста с сайта?

Как сделать смену (ротацию) изображений на Java Script?

Исчезающий текст в поле input и textarea на JavaScript

Создаём select и radio со скрытыми блоками

Асинхронная загрузка изображений на сервер (скрытый IFRAME)

Как сделать кнопку назад или как вернуться на предыдущую страницу? HTML и JS

Как сжать или закодировать JavaScript? Онлайн сервисы

Как запретить ввод определённых символов или произвести их замену в поле или textarea JS?

Как написать обратный отсчёт времени до определённой даты? JS

Как снять выбор (check) с радио-кнопки (radio button)

Как открыть изображение в новом окне?

Статьи по jQuery

Создаём всплывающее модальное окно jQuery

Как очистить код вставленный в WISYWIG редактор из MS Word?

Как сделать изображения чёрно-белыми и обратно средствами jQuery и CSS?

Как сделать чекбокс для активации кнопки или другого элемента? jQuery

Как поменять блоки и другие элементы местами с помощью jQuery?

Как создать адаптивный (резиновый) дизайн сайта на jQuery?

Открыть или скрыть блок при выборе чекбокса jQuery

Простые примеры работы jQuery, Ajax и PHP

Проблемы с кодировкой в jQuery Ajax и PHP

Как создать кнопку вверх или вертикальное прокручивание страницы на jQuery?

Плавное открытие и скрытие блока div средствами jQuery

Как распечатать web-страницу с помощью jQuery?

Эффект лупы или как зумировать изображение на jQuery

Красивое всплывающее окно и кнопки на jQuery, WebUI Popover

Как вывести на сайте количество подписчиков (участников) группы, страницы vk. com jQuey

Статьи по Ajax

Как создать быстрое подключение Ajax?

Статьи по PHP для новичков, начинающих и чайников

Что такое htaccess? И как он работает?

Скрипт загрузки изображения на сайт PHP

Как найти и заменить строку в файле PHP?

Функция отправки писем mail() PHP

Как обрезать текст строки средствами PHP?

Пример настройки файла htaccess php

Как включить или выключить отображение ошибок в PHP?

Как подсчитать количество строк в файле PHP?

Как подсчитать количество файлов в папке (директории) PHP?

Как определить размер файла средствами PHP?

Формат даты как в социальных сетях. Функция PHP

Временные зоны и часовые пояса в PHP

Как отсортировать массив в алфавитном порядке в PHP?

Как определить язык пользователя средствами PHP?

Как сделать транслит русского текста или строки в PHP?

Как создать подключение к базе данных в PHP?

Как определить возраст пользователя по дате рождения PHP?

Как создать мобильную версию сайта?

Как убрать из адреса URL index. php и index.html?

Как отобразить содержимое директории (папки) в PHP?

Функция PHP для конвертации изображения в чёрно-белое

Популярные примеры работы регулярных выражений в PHP

Как экспортировать данные из PHP в Excel файл?

Как создать или извлечь данные из ZIP-архива через PHP?

Как сделать вывод времени учитывая часовой пояс PHP?

Как создать счётчик обращений к файлам на PHP?

Как определить город по ip адресу средствами PHP?

Примеры функций обработки bb кода в PHP

Возврат посетителя на предыдущую страницу на PHP

Переменные окружения в PHP или как узнать всё о посетителе сайта и сервере

Форматирование чисел с помощью функции number_format PHP

Как в PHP загрузить на сайт изображение с изменением веса и размера?

Склонение слов в зависимости от количественных показателей средствами PHP

Как подсветить синтаксис HTML-кода средствами PHP

Как реализовать редирект внешних ссылок с сайта на PHP?

Вывод текущего года на PHP

Статьи по MySQL для новичков, начинающих и чайников

Примеры SQL запросов к базе данных MySQL

Статьи по SEO

Как и зачем регистрировать сайт в поисковике (поисковых системах)?

Нужен ли дефис в доменном имени?

Как запретить индексацию ссылки или области сайта?

Почему не отображается иконка сайта favicon?

Какой сайт лучше: с www или без? Как склеить адрес?

Самые распространённые ошибки при продвижении и оптимизации

Почему посещаемость сайта не растёт?

Что использовать в URL адресе: дефис или нижнее подчёркивание?

Как зарегистрировать сайт в белых каталогах?

Статьи по Как заработать

Контекстная реклама. Сравнение: Яндекс Директ и Google AdWords

Как задержать посетителя на своём сайте?

Статьи по Joomla

Статьи по Сервисы

Как подобрать html код цвета он-лайн?

Самые лучшие и популярные сервисы создания кнопок CSS

Как создать ссылку в Vk.com (ВКонтакте)?

Статьи по Разное

Проблемы с кодировкой файла или страницы на сайте

Как подобрать шрифты для сайта?

На каком движке (CMS) лучше делать сайт?

Что делать, если Chrome под Android изменяет размер шрифта? CSS

Бесплатные шаблоны сайтов

Шаблон социальной сети #001. Genericblue

Шаблон бизнес-сайта #001. Cityrhytm

Шаблон сайта о компьютерах #001. Grey headphones

Шаблон бизнес-сайта #002. Free html5 grey

Шаблон бизнес-сайта #003. Template008

Шаблон сайта о компьютерах #002. Grey Keyboard

Шаблон сайта о компьютерах #003. Music player

Шаблон сайта о здоровье и красоте #001. Waterdrops

Шаблон сайта о медицине #001. Medical

Шаблон бизнес-сайта #004. Simplistic photography

Шаблон сайта о путешествиях #001. Openair

Шаблон сайта о путешествиях #002. Rambling Soul

Шаблон сайта об авто и мото #001. Track day

Шаблон сайта об искусстве #001. Template 009

Шаблон сайта-блога #001. Blog stratagem

Шаблон сайта Кафе и рестораны #001. Cookies n cream

Шаблон сайта Кулинария #001. Menutude

Шаблон сайта Интерьер #001. Wellow

Шаблон сайта фото и портфолио #001. Fwt photo

Шаблон сайта #001. Whats your solution

Шаблон сайта о спорте #001. Sport recreation

Шаблон сайта о спорте #002. Squareaway

Шаблон сайта о путешествиях #003. Flying

Шаблон сайта-блога #002. Old books

Шаблон сайта о компьютерах #004. Grey Network

Шаблон сайта о компьютерах #005. Quality co

Шаблон бизнес-сайта #005. Page template

Шаблон бизнес-сайта #006. Temperate Cool

Шаблон бизнес-сайта #007. Wood theme

Шаблон сайта об авто и мото #002. Auto

Шаблон сайта об авто и мото #003. Auto001

Шаблон сайта интернет-магазина #001. Internet magazin

Шаблон сайта фото и портфолио #002. Wedding photo

Шаблон сайта фото и портфолио #003. Photoshablon

Шаблон сайта фото и портфолио #004. Portfolio

Шаблон сайта фото и портфолио #005. Moving boxes content

Шаблон сайта фото и портфолио #006. Css free template

Шаблон сайта фото и портфолио #007. Fotograf

Шаблон сайта об искусстве #002. Art-gallery

Шаблон сайта об образовании #001. Education

Шаблон сайта о дизайне #001. Graphite

Шаблон сайта Metro design

Шаблон социальной сети #002. General

Шаблон социальной сети #003. Simple blue

Шаблон сайта развлечений #001. Retro

Шаблон сайта развлечений #002. Speaker blog

Шаблон личного сайта #001. Photographer

Шаблон сайта о моде и красоте #001. Fashion blog

Шаблон сайта о web-дизайне #002

Шаблон сайта о дизайне #003

Шаблон сайта о работе и вакансиях 001. Design work

Шаблон сайта интернет-магазина #002. Bookstore

Шаблон сайта интернет-магазина #003. Gadget store

Шаблон сайта 004 Parallax

Шаблон сайта о музыке #003. BoomMusic.Адаптивный дизайн

Шаблон сайта. Проведение свадеб. Wedding master. Responsive

Шаблон личного сайта. Сайт-самопрезентация. Responsive

Шаблон сайта-презентации. Эффект parallax

Шаблон сайта с адаптивным дизайном

Шаблон сайта блога. Адаптивный Flat дизайн

Шаблон сайта Srizon-Drifolio-Bootstrap

Адаптивный шаблон сайта Squadfree

Адаптивный шаблон агентства недвижимости на HTML и CSS

[CSS] — Как добавить подчеркивание к ссылке при наведении в CSS —

Узнайте, как добавить эффект подчеркивания к ссылке при наведении курсора с помощью свойства text-decoration в CSS.

👩‍💻 Технический вопрос

Спросил 3 месяца назад в CSS by Yvette

 
 Как добавить подчеркивание ссылки при наведении? 
 

наведение связь текст-украшение

👩‍💻 Технический вопрос

Спросил 21 час назад в CSS by A

 
 как убрать отступы на кнопке 
 

кнопка набивка КСС

👩‍💻 Технический вопрос

Спросил 23 часа назад в CSS by Marta

 
 как сдвинуть кнопку немного вправо 
 

CSS позиционирование допуск осталось

👩‍💻 Технический вопрос

Спросил 1 день назад в CSS от Arron

 
 как добавить тень к моей кнопке? 
  

кнопка тень CSS коробка-тень

👩‍💻 Технический вопрос

Спросил 2 дня назад в CSS Алисия

 
 как стилизовать кнопку 
 

стиль кнопка HTML CSS набивка граница курсор размер шрифта эффект наведения

👩‍💻 Технический вопрос

Спросил 2 дня назад в CSS by Thembekile

 
 Как сделать переход при наведении кнопки? 
 

кнопка переход при наведении КСС

👩‍💻 Технический вопрос

Спросил 3 дня назад в CSS от Kiara

 
 как настроить макет нескольких карт 
 

пользовательский макет карты CSS флексбокс CSS-сетка

👩‍💻 Технический вопрос

Спросил 3 дня назад в CSS by Kiara

 
 как сделать перенос текста в css 
 

CSS перенос текста перенос слова переполнение-обертка

👩‍💻 Технический вопрос

Спросил 3 дня назад в CSS by Veronica

 
 как вставить картинку для фона в css 
 

background-image фоновый повтор размер фона фоновая позиция

👩‍💻 Технический вопрос

Спросил 4 дня назад в CSS Сара

 
 как убрать подчеркивание в кнопке 
 

кнопка подчеркнуть CSS текст-украшение

👩‍💻 Технический вопрос

Спросил 4 дня назад в CSS Киара

 
 как прокомментировать в css 
 

комментарий

👩‍💻 Технический вопрос

Спросил 4 дня назад в CSS Киара

 
 что такое сетка 
 

сетка Веб-разработка адаптивные макеты CSS-фреймворки начальная загрузка

👩‍💻 Технический вопрос

Спросил 4 дня назад в CSS автор Keitumetse Nirvana Akisa

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

код устранения неполадок кнопка прослушиватель событий выравнивание изображения Выравнивание по центру CSS

👩‍💻 Технический вопрос

Спросил 5 дней назад в CSS по christrice

 
 как создать наведение? 
  

наведение CSS псевдокласс

👩‍💻 Технический вопрос

Спросил 7 дней назад в CSS Кристрис

 
 как сделать углы круглыми? 
 

радиус границы Свойство CSS углы округлость CSS-трюки

👩‍💻 Технический вопрос

Спросил 7 дней назад в CSS Элизабет

 
 Можете ли вы помочь мне понять высоту строки 
 

высота строки Свойство CSS

👩‍💻 Технический вопрос

Спросил 7 дней назад в CSS Кристрис

 
 как сделать шрифт h2 тонким? 
 

h2 шрифт тонкий CSS вес шрифта

👩‍💻 Технический вопрос

Спросил 8 дней назад в CSS от Jasmine

 
 Могу ли я настроить атрибуты CSS для элемента 
? 
 

УС элемент часов css-атрибуты Селекторы CSS цвет высота ширина

👩‍💻 Технический вопрос

Спросил 8 дней назад в CSS по christrice

 
 как сделать мои слова большими? 
 

УС размер шрифта

👩‍💻 Технический вопрос

Спросил 8 дней назад в CSS Ариэль

 
 Что такое высота строки? 
 

высота строки CSS текст космос имущество

👩‍💻 Технический вопрос

Спросил 8 дней назад в CSS Юлия

 
 Как сделать 
 полужирным шрифтом 
 

CSS смелый вес шрифта р элемент сорт ID

👩‍💻 Инструкции по коду CSS

Спросил 8 дней назад в CSS by Heather

 
 при разрешении менее 768px выравнивание по центру div 
 

CSS медиа-запрос выравнивание Адаптивный дизайн

👩‍💻 Технический вопрос

Спросил 9дней назад в CSS Нил

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

положение фиксированное прокрутка HTML КСС

👩‍💻 Технический вопрос

Спросил 9 дней назад в CSS Аманда

 
 как развернуть кнопку в список 
 

кнопка развернуть кнопка список JavaScript CSS HTML

👩‍💻 Технический вопрос

Спросил 9 дней назад в CSS by Quinnie

 
 Как изменить ориентацию моего фонового изображения? 
 

фоновое изображение фоновое положение КСС

👩‍💻 Технический вопрос

Спросил 9 дней назад в CSS от Aneeah

 
 как сделать овальную кнопку 
 

HTML CSS Овальная кнопка

👩‍💻 Технический вопрос

Спросил 9 дней назад в CSS Джози

 
 моя кнопка обрезается при просмотре моего веб-сайта на мобильном устройстве 
 

CSS медиазапросы Отзывчивый дизайн мобильное устройство пуговица обрезанная

👩‍💻 Технический вопрос

Спросил 9 дней назад в CSS от Sibusisiwe

 
 как добавить тень с помощью css 
 

УС коробка-тень тень стиль

👩‍💻 Технический вопрос

Спросил 9 дней назад в CSS от Raquel

 
 Мой CSS не работает с h2 или h3 
 

HTML CSS h2 h3 тег ссылки размер шрифта вес шрифта цвет

👩‍💻 Технический вопрос

Спросил 9 дней назад в CSS Одри

 
 как центрировать сетку 
 

сетка центр выравнивание содержания выравнивание элементов

👩‍💻 Технический вопрос

Спросил 9 дней назад в CSS Джози

 
 как сделать мою веб-страницу адаптивной 
 

Адаптивный дизайн CSS медиа-запросы относительные единицы размеры экрана

👩‍💻 Технический вопрос

Спросил 9 дней назад в CSS Аннабелла

 
 как исправить размер кнопки? в css кнопка 
 

размер CSS-свойства ширина высота ед.

👩‍💻 Технический вопрос

Спросил 9 дней назад в CSS by Beth

 
 как центрировать тег  
 

HTML CSS центр анкерная бирка

👩‍💻 Технический вопрос

Спросил 9 дней назад в CSS по Азии

 
 как установить границу кнопки и ссылку внутри кнопки 
 

граница кнопка связь HTML

👩‍💻 Технический вопрос

Спросил 9 дней назад в CSS by Noelia

 
 как скрыть изображение с помощью @media на css 
 

скрыть изображение @СМИ CSS показать свойство

👩‍💻 Инструкции по коду HTML, CSS и JavaScript

Спросил 9дней назад в CSS by Heather

 
 Я хочу, чтобы за текстом при наведении курсора мыши отображался цветной блок 
 

Цветной блок эффект наведения КСС

👩‍💻 Технический вопрос

Спросил 9 дней назад в CSS by Olivia

 
 как центрировать кнопку 
 

по центру кнопка HTML CSS горизонтальный центр

👩‍💻 Инструкции по коду HTML, CSS и JavaScript

Спросил 9 дней назад в CSS by Heather

 
 фон с линейным градиентом 
 

фон линейный градиент HTML КСС

👩‍💻 Технический вопрос

Спросил 9 дней назад в CSS by Bamidele

 
 как разместить элемент перед другим элементом 
 

HTML CSS z-индекс

👩‍💻 Технический вопрос

Спросил 9 дней назад в CSS by Ginette

 
 Как я могу использовать выравнивание по вертикали в CSS, чтобы текст отображался внизу его поля? 
 

УС вертикальное выравнивание выравнивание текста

👩‍💻 Технический вопрос

Спросил 9 дней назад в CSS by Ginette

 
 Как в CSS сделать текст выровненным по низу поля? 
 

УС выравнивание текста вертикальное выравнивание флексбокс абсолютное позиционирование

👩‍💻 Технический вопрос

Спросил 9 дней назад в CSS by Ginette

 
 Как в CSS подчеркивать текст, управляя расстоянием подчеркивания от текста и толщиной подчеркивания? 
 

УС украшение текста смещение подчеркивания текста ширина подчеркивания текста нижняя граница подчеркивание текста подчеркните расстояние толщина подчеркивания настроить расстояние подчеркивания настроить толщину подчеркивания

👩‍💻 Технический вопрос

Спросил 9 дней назад в CSS от Iam

 
 как заставить изображение css помещаться в контейнер, например, под размер 
 

CSS изображение контейнер подходит к размеру

👩‍💻 Технический вопрос

Спросил 9 дней назад в CSS от Jenish

 
 как подчеркнуть конкретное имя в css 
 

CSS подчеркнуть украшение текста конкретное имя

👩‍💻 Технический вопрос

Спросил 10 дней назад в CSS by Marivel

 
 как центрировать текстовую ссылку в CSS 
 

CSS центр текстовая ссылка выравнивание текста HTML

👩‍💻 Технический вопрос

Спросил 10 дней назад в CSS Урангуа

 
 прокручиваемый стол внутри миксина make-container 
 

прокручиваемый стол миксин сделать-контейнер переполнение Сасс

👩‍💻 Технический вопрос

Спросил 10 дней назад в CSS by Marivel

 
 как добавить отступ только с левой стороны 
 

padding-left КСС

👩‍💻 Технический вопрос

Спросил 10 дней назад в CSS Эмбер

 
 сделать вертикальный список горизонтальным 
 

CSS отображать свойство сгибаться горизонтальный список

👩‍💻 Технический вопрос

Спросил 10 дней назад в CSS Сара

 
 Как сделать контейнер отзывчивым? 
 

Адаптивный дизайн медиазапросы контейнер

👩‍💻 Технический вопрос

Спросил 10 дней назад в CSS Сара

 
 Как заставить ящик реагировать? 
 

коробка отзывчивый CSS размеры проценты

👩‍💻 Технический вопрос

Спросил 10 дней назад в CSS by Simphiwe

 
 удалить пустое пространство вокруг значка 
 

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

Просмотрите вопросы по кодированию по темам: HTML CSS JavaScript Код ВС питон Реагировать Начальная загрузка Попутный ветер Джава PHP Node. js Рубин Идти .NET

html — Как создать эффект подчеркивания для зависающих ссылок в CSS?

Я пытаюсь добиться такого стиля:

Как создать этот эффект с помощью CSS?

• HTML
• CSS

 а{
   текстовое оформление: нет;
}
а: наведите {
   украшение текста: подчеркивание;
}
 

 ул{
  стиль списка: нет;
  заполнение: 0;
  маржа: 0;
}
уль ли {
  плыть налево;
  поле: 0 5px;
}
уль ли а {
  текстовое оформление: нет;
  черный цвет;
}
уль ли: наведите {
  нижняя граница: 2 пикселя сплошного красного цвета;
} 

 <ул>
  
Главная
  
О нас
  
Контакты
 

 а {
        отображение: встроенный блок;
        положение: родственник;
        текстовое оформление: нет;
        выравнивание текста: по центру;
    }

    а: наведите: до {
        содержание: '';
        ширина: 100%;
        высота: 100%;
        положение: абсолютное;
        слева: 0;
        внизу: 0;
        box-shadow: вставка 0 -10px 0 #11c0e5;
    }

    промежуток {
        дисплей: блок;
        ширина: 100 пикселей;
        высота: 40 пикселей;
        цвет фона: красный;
        отступы сверху: 20px;
    } 

 
    тексты ссылок
    
   

Зарегистрируйтесь или войдите в систему

Опубликовать как гость

Требуется, но не отображается

Опубликовать как гость

Требуется, но не отображается

Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.