Css подчеркивание при наведении: text-decoration-style | htmlbook.ru

Разное 

Содержание

Эффект подчёркивания при наведении на ссылку

Здравствуйте, дорогие друзья!

В данной статье я покажу вам как сделать плавное подчёркивание ссылки при наведении.
Этот интересный эффект можно использовать как для ссылок, находящихся внутри определённого блока, так и для всех ссылок на сайте. Данный эффект при наведении создаётся при помощи CSS.

Навигация по статье:

И будет он состоять всего из нескольких строчек кода.

Для того чтобы посмотреть как выглядит плавное подчёркивание ссылки при наведении просто наведите курсор на одну из ссылок ниже:

Как создать эффект плавного подчёркивания ссылки при наведении?

Предположим у Вас есть блок с классом «link» и внутри него есть ссылки, для которых нужно применить данный эффект при наведении.

<div> <a href=»#»>Ссылка 1</a> <a href=»#»>Ссылка 2</a> <a href=»#»>Ссылка 3</a> </div>

<div>

<a href=»#»>Ссылка 1</a>

<a href=»#»>Ссылка 2</a>

<a href=»#»>Ссылка 3</a>

</div>

Сначала нам нужно задать для этих ссылок несколько CSS свойств, для того чтобы к ним можно было применить данный эффект при наведении. Я оставила комментарий возле каждого свойства так что вы сможете поменять некоторые параметры, чтобы ссылки лучше подходили под дизайн вашего сайта.

.link a { text-decoration:none; /*Убираем стандартное подчёркивание ссылки если оно ещё не убрано*/ display: inline-block; /*делаем чтобы наша ссылка из строчного элемента превратилась в строчно-блочный*/ line-height: 1; /*Задаём высоту строки (можно в пикселях)*/ color:#2F73B6;/*Задаём цвет ссылки*/ }

.link a {

text-decoration:none; /*Убираем стандартное подчёркивание ссылки если оно ещё не убрано*/

display: inline-block; /*делаем чтобы наша ссылка из строчного элемента превратилась в строчно-блочный*/

line-height: 1; /*Задаём высоту строки (можно в пикселях)*/

color:#2F73B6;/*Задаём цвет ссылки*/

}

Теперь для того чтобы создать плавное подчёркивание ссылки при наведении нам нужно при помощи CSS добавить псевдоэлемент after. Именно этот элемент и будет представлять собой плавно появляющуюся линию подчёркивания. Для него нам нужно прописать следующие свойства:

.link a:after { display: block; /*превращаем его в блочный элемент*/ content: «»; /*контента в данном блоке не будет поэтому в кавычках ничего не ставим*/ height: 3px; /*задаём высоту линии*/ width: 0%; /*задаём начальную ширину элемента (линии)*/ background-color: #225384; /*цвет фона элемента*/ transition: width 0.4s ease-in-out; /*данное свойство отвечает за плавное изменение ширины. Здесь можно задать время анимации в секундах (в данном случае задано 0.4 секунды)*/ }

.link a:after {

    display: block; /*превращаем его в блочный элемент*/

    content: «»; /*контента в данном блоке не будет поэтому в кавычках ничего не ставим*/

    height: 3px; /*задаём высоту линии*/

    width: 0%; /*задаём начальную ширину элемента (линии)*/

    background-color: #225384; /*цвет фона элемента*/

    transition: width 0. 4s ease-in-out; /*данное свойство отвечает за плавное изменение ширины. Здесь можно задать время анимации в секундах (в данном случае задано 0.4 секунды)*/

}

И на последнем этапе создания плавного подчёркивания ссылки нужно задать для песевдоэлемента after ширину 100% при наведении, а также при установленном курсоре. В этом нам помогут псевдоклассы :hover и :focus.

Выглядеть это будет так:

.link a:hover:after, .link a:focus:after { width: 100%; }

.link a:hover:after,

.link a:focus:after {

    width: 100%;

}

То есть изначально наш псевлоэлемент имеет ширину 0%, а при наведении она плавно становится 100%.
Также можно сделать так чтобы при наведении на ссылку помимо эффекта плавного подчёркивания происходила также смена цвета ссылки.

Для этого дописываем следующее:

.link a:hover{ color:#225384; }

.

link a:hover{

color:#225384;

}

Если вы хотите чтобы данный эффект применялся для всех ссылок на вашем сайте, то вместо «.link a» нужно будет писать «а».

Чтобы не сбивать вас с толку даю весь код вместе. В этом коде эффект плавного подчёркивания применится ко всем ссылкам на сайте:

a { text-decoration:none; /*Убираем стандартное подчёркивание ссылки если оно ещё не убрано*/ display: inline-block; /*делаем чтобы наша ссылка из строчного элемента превратилась в строчно-блочный line-height: 1; /*Задаём высоту строки (можно в пикселях)*/ color:#2F73B6;/*Задаём цвет ссылки*/ } a:after { display: block; /*превращаем его в блочный элемент*/ content: «»; /*контента в данном блоке не будет поэтому в кавычках ничего не ставим*/ height: 3px; /*задаём высоту линии*/ width: 0%; /*задаём начальную ширину элемента (линии)*/ background-color: #225384; /*цвет фона элемента*/ transition: width 0.4s ease-in-out; /*данное свойство отвечает за плавное изменение ширины.

Здесь можно задать время анимации в секундах (в данном случае задано 0.4 секунды)*/ } a:hover:after, a:focus:after { width: 100%; } a:hover{ color:#225384; }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

a {

text-decoration:none; /*Убираем стандартное подчёркивание ссылки если оно ещё не убрано*/

display: inline-block; /*делаем чтобы наша ссылка из строчного элемента превратилась в строчно-блочный

line-height: 1; /*Задаём высоту строки (можно в пикселях)*/

color:#2F73B6;/*Задаём цвет ссылки*/

}

 

a:after {

    display: block; /*превращаем его в блочный элемент*/

    content: «»; /*контента в данном блоке не будет поэтому в кавычках ничего не ставим*/

    height: 3px; /*задаём высоту линии*/

    width: 0%; /*задаём начальную ширину элемента (линии)*/

    background-color: #225384; /*цвет фона элемента*/

    transition: width 0. 4s ease-in-out; /*данное свойство отвечает за плавное изменение ширины. Здесь можно задать время анимации в секундах (в данном случае задано 0.4 секунды)*/

}

 

a:hover:after,

a:focus:after {

    width: 100%;

}

 

a:hover{

  color:#225384;

}

После добавления данного кода просто сохраняете файл и всё! Всё очень просто не правда ли?! Вот за что я люблю CSS3! С его помощью можно за несколько минут создать очень интересные эффекты и при этом не нужно подключать дополнительных библиотек и т.д.

Куда вставлять весь этот код?

CSS код со всеми прописанными свойствами нужно вставить в CSS файл вашего сайта или вашей темы (если сайт работает на CMS)

Для WordPress этот файл будет находиться по адресу:

wp-content/themes/название темы/style.css

Для Opencart этот файл находится по адресу:

catalog/view/theme/название темы/stylesheet/stylesheet.css

Данный CSS код нужно вносить в самый конец CSS файла.

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

На этом у меня всё! Желаю вам успешной реализации данного эффекта у себя на сайте! До встречи в следующих статьях!

С уважением Юлия Гусарь

CSS Див ссылке подчеркивание текста при наведении



У меня есть такой простой div…

<a href="#">
  <div>
    <div>
     <h3>Heading here</h3>
     <p>Text content here.</p>
    </div>
  </div>
</a>

… что позволяет мне менять цвет фона при наведении div. Работает отлично,но в результате я получаю текст внутри ссылки, показывающий подчеркивание при наведении курсора. Я пробовал несколько способов нацелиться на h3 и p, но до сих пор не могу избавиться от текстового оформления при наведении курсора.

Есть идеи о том, на какой элемент html мне нужно нацелиться, чтобы применить text-decoration: none ?

CSS здесь…

.promo-box
{
text-align:center;
border-radius:5px;
padding:10px;
margin-bottom:20px;
min-height:240px;
}
h3
{
font-family:Lato, Arial, Helvetica, sans-serif;
font-weight:700;
color:#FFF;
font-size:20px;
text-decoration: none;
}
.promo-box p
{
font-family:'Open Sans', Arial, Helvetica, sans-serif;
font-weight:400;
color:#FFF;
font-size:16px;
line-height:16px;
}
.promo-1
{
background-color:#125595;
}
div.promo-1:hover;
}
html css hyperlink hover
Поделиться Источник lowercase     21 января 2014 в 20:49

3 ответа

  • CSS переход подчеркивание показать

    Я пытаюсь сделать переход CSS, в котором подчеркивание появляется снизу вверх, когда вы наводите курсор на элемент href. Я нашел этот пример,который создает подчеркивание, появляющееся слева направо при наведении курсора. a { text-decoration: none; border-bottom: 1px solid blue; margin-right:…

  • Как удалить подчеркивание текста (которое я установил сам) из <span> при наведении курсора?

    Я хочу иметь ссылку, но я хочу иметь событие jQuery fire onclick, поэтому я использую <span> с идентификатором вместо ссылки,чтобы я мог слушать событие click. Я хочу, чтобы <span> выглядел как ссылка, так что: Курсор должен показывать руку при наведении <span> <span>…


6

вам нужно применить текстовое оформление к ссылке, а не к h3 или p , как это:

a{
    text-decoration:none;
}

вы не можете применить стиль text-decoration:none к элементу внутри строки.
Вы можете назначить класс ссылке, если вы не хотите применять это правило ко всем ссылкам, для этого созданы классы.

Пример вставьте класс внутри css

.not-underline{
        text-decoration:none;
    }

обновите свой html, добавив класс в свою ссылку

 <a href="#"promo-box promo-1">
    <div>
     <h3>Heading here</h3>
     <p>Text content here.</p>
    </div>
  </div>
</a>

DEMO

Поделиться Alessandro Minoccheri     21 января 2014 в 20:53


2

Вы можете добавить имя родительского селектора перед тегом привязки в CSS.

<div>
  <a href="#">
    <div>
      <div>
        <h3>Heading here</h3>
        <p>Text content here.</p>
      </div>
    </div>
 </a>
</div>

CSS:

.display a{
    text-decoration:none !important;
}

Вот демо — версия

Поделиться Sagar Awasthi     27 марта 2014 в 11:02


0

И чтобы избежать подчеркивания текста при наведении курсора, добавьте это в свой css:

a:hover{
  text-decoration:none;
  }

Поделиться Faysal Ahmed     21 января 2014 в 20:57

  • Сделать подчеркивание стрелять по ссылке при наведении курсора

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

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

    У меня есть ссылка <a class=link-articles href=#articles>My Articles</a> и мой css .link-articles { text-decoration: underline; color: blue; } Однако при наведении курсора Я хотел бы иметь вместо синего подчеркивания красное подчеркивание, но текст должен оставаться синим, и только…

Похожие вопросы:


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

Я не могу удалить подчеркивание при наведении курсора на этой странице: http:/ / www.studyroomguides.net/?page_id=19 Я пробовал добавлять: .a:hover{ text-decoration: none; } Я бы хотел, чтобы…


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

Я добавил на свой сайт ховерборд, который переворачивается, чтобы показать больше текста. Он хорошо работает только с хромом, поэтому я попробовал отключить его в Firefox. Он больше не…


CSS: почему у меня есть красное подчеркивание на ссылках изображений при наведении курсора?

На моем веб-сайте у меня есть следующее CSS: a:hover{color:red;border-bottom:1px solid} Это показывает красное подчеркивание на текстовых ссылках при наведении курсора, что желательно. Однако это…


CSS переход подчеркивание показать

Я пытаюсь сделать переход CSS, в котором подчеркивание появляется снизу вверх, когда вы наводите курсор на элемент href. Я нашел этот пример,который создает подчеркивание, появляющееся слева направо…


Как удалить подчеркивание текста (которое я установил сам) из <span> при наведении курсора?

Я хочу иметь ссылку, но я хочу иметь событие jQuery fire onclick, поэтому я использую <span> с идентификатором вместо ссылки,чтобы я мог слушать событие click. Я хочу, чтобы <span>. ..


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

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


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

У меня есть ссылка <a class=link-articles href=#articles>My Articles</a> и мой css .link-articles { text-decoration: underline; color: blue; } Однако при наведении курсора Я хотел бы…


Дисплей див при наведении тег привязки

Я хочу, чтобы отобразить див при наведении на тег привязки, используя css. Ниже приведен мой код html <td class=cellStyle> <a href=# class=linkStyle> <div>Home</div> <div…


CSS эффект при наведении курсора (пунктирное подчеркивание + изменение цвета текста)

Я совершен CSS нуб Не могли бы вы уделить мне минутку и помочь создать пунктирное подчеркивание (с пробелом) с изменением цвета текста при наведении мыши? Я был бы очень признателен вам за помощь!. ..


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

В текущем стабильном Chrome при использовании следующего CSS, где установлена некоторая непрозрачность, подчеркивание текста исчезает. Когда непрозрачность установлена на 1 или удалена,…

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

Все темы имеют скучную анимацию при наведении на ссылки, это просто подчеркивание, давайте ка это чуток разукрасим и разнообразием эффек, а сделаем это плавным появление подчёркиванием ссылки

Для этого нам в стилях шаблона- style.css нужно найти a
и дописать следующей код

a { line-height: 1; display: inline-block; color:#0085ba; text-decoration:none; cursor: pointer; } a:after { display: block; content: &quot;&quot;; height: 2px; width: 0%; background-color: #0085ba; transition: width . 3s ease-in-out; } a:hover:after, a:focus:after { width: 100%; }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

a {

    line-height: 1;

    display: inline-block;

    color:#0085ba;

    text-decoration:none;

    cursor: pointer;

}

a:after {

    display: block;

    content: &quot;&quot;;

    height: 2px;

    width: 0%;

    background-color: #0085ba;

    transition: width .3s ease-in-out;

}

a:hover:after,

a:focus:after {

    width: 100%;

}

Немного поясню код
text-decoration:none; — мы избавляемся от стандартного подчеркивание ссылки
Псевдоэлемент :after, добавляет дополнительный элемент, в нашем случае это линия, и определим простенький эффект перехода в свойстве transition:. Ширину линии изначально выставим с нулевым значением width: 0%;, высоту определим в 2px. Цвет линии может быть любым, в примере не стал особо фантазировать и выставил в соответствии цвета текста ссылки.
transition:. время\скорость анимации
Псевдоклассы:hover и :focus. Первый будет определяет стиль ссылки при наведении, второй сработает когда на ссылке курсор. Здесь мы изменим значение ширины в 100%.
Выглядит это будет так

Вот и все, сохраняем файл и обновляем, наводим курсор на ссылку и наша ссылка подчеркивается медленно выплывающей линей. Такай эффект можно добавить не только к ссылкам, но и меню, но об этом в следующей раз

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

Нас недавно заинтересовал простой визуальный эффект: при наведении указателя мыши подчеркивание появляется из центра с помощью анимации. Создать такой эффект на удивление просто, не требуется добавление дополнительных элементов DOM в код HTML, и в старых версиях браузеров, не поддерживающих анимации CSS, он будет выглядеть нормально, как обычное подчеркивание.  Можете увидеть этот эффект ниже.

 

 

Для начала нужно отключить свойство украшения текста и задать ссылке относительное расположение. Для простоты также убедимся, что ссылка не меняет цвет при наведении указателя мыши. Теперь применим этот эффект ко всем элементам ссылок в тегах h3:

 

h3 > a {
  position: relative;
  color: #000;
  text-decoration: none;
}
h3 > a:hover {
  color: #000;
}

После этого добавим границу и спрячем ее с помощью трансформации. Это делается с помощью установки этих свойств псевдоэлементу :before и задания значения масштаба по оси X 0. В качестве обходного пути спрячем эти свойства с помощью visibility: hidden для браузеров, не поддерживающих анимации CSS:

 

h3 > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0. 3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

В самом конце укажем элементу анимировать все применяемые к нему изменения со значением продолжительности 0,3 секунды. Теперь, чтобы анимация появилась, нужно просто сделать элемент снова видимым при наведении указателя мыши и задать значение масштаба по оси X 1:

 

h3 > a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

И это все! На всякий случай в демонстрации работы оставлены приставки производителей для старых версий браузеров Firefox и Opera, но если Вам не требуется поддержка старых версий, можете использовать только свойства без приставок производителя и с приставкой производителя -webkit, как в коде CSS в тексте урока.

Автор урока Tobias Ahlin

Перевод — Дежурка

Смотрите также:

Красивое css подчеркивание элементов

Наверняка вы замечали на многих ресурсах анимационное подчеркивание ссылок и хотели узнать, как это воплотить на своем сайте. Чтобы сделать красивое css подчеркивание элементов нам не понадобятся большие познания, либо подключение дополнительных скриптов, все, что нам нужно – это стандартный HTML и CSS.

Вариации подчеркивания

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

демонстрация подчеркивания

HTML

Для начала создадим какой либо элемент, к примеру, возьмем тег A. Атрибут его нам не важен, потому как большая часть работы будет отведена стилям.

<a href="#">demo ссылка</a>

CSS

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

За подчеркивание у нас отвечает свойство text-decoration, но применять его здесь не имеет смысла, потому как воплотить наши планы по анимации в таком случае не совсем актуально. Не будем забывать, что каждому элементу можно присвоить псевдоэлемент ::before или ::after. Поэтому все свойства будем задавать именно им, а нашей ссылке сразу же задаем следующие параметры:

a{
   display: inline-block;
   position: relative;
   text-decoration: none;
}

Таким образом мы задали блочную обтекаемость и позиционирование относительно исходного места. Все это делается для того, чтобы подчеркивание не вылезало за пределы элемента, когда мы псевдоэлементу ::before назначим абсолютное позиционирование. После этого нам необходимо задать его четкое расположение и размер. И тут мы сразу же создаем первую половину подчеркивания.

a::before{
   display: block;
   position: absolute;
   content: "";
   height: 2px;
   width: 0;
   background-color: red;
   transition: width .5s ease-in-out, left .5s ease-in-out;
   left: 50%;
   bottom: 0;
}

Т.е. высота линии подчеркивания будет 2px, длина 0, красного цвета, а за анимацию отвечает свойство transition. Ну и конечно же, отступ слева на 50%, т.е. центральная точка. Практически те же действия производим и с псевдоэлементом ::after:

a::after{
   display: block;
   position: absolute;
   content: "";
   height: 2px;
   width: 0;
   background-color: red;
   transition: width .5s ease-in-out;
   left: 50%;
   bottom: 0;
}

Дальше нам остается только добавить эффект при наведении мышки на ссылку.

a:hover::before{
   width: 50%;
   left: 0;
}
a:hover::after{
   width: 50%;
}

Стоит отметить, что это лишь один из способов реализации данной идеи. Можно то же самое сделать и при помощи только одного псевдоэлемента ::before. Подписывайтесь на материалы и предлагайте темы для статей.

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(18 голосов, в среднем: 4.7 из 5)
не скупись ставь лайк Подписка на обновления:

Плавное подчеркивание ссылки при наведении на чистом CSS — WEB Головоломки

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

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

<a href="#">Как сделать плавное подчеркивание</a>

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

Наш план заключается в том, что с помощью псевдоэлемента :before мы создадим линию, которая будет располагаться чуть ниже ссылки. И этой линией мы и будем в дальнейшем управлять.

Добавим вот такие стили:

a {
	position: relative;
	color: #484848;
	font-size: 1.25rem;
	text-decoration: none;
}
a::before {
	content: '';
	position: absolute;
	left: 0; bottom: -5px;
	width: 100%;
	height: 1.5px;
	background-color: red;
}

У вас должна была появиться красная линия под ссылкой. Это и есть наш псевдоэлемент before.

Изменим ширину этой линии. Вместо 100% зададим 0 — то есть, ее теперь не будет видно.

А затем, когда пользователь будет наводить курсор на ссылку, мы будем менять свойство width у нашего псевдоэлемента. Давайте, пропишем это:

a:hover:before {
	width: 100%;
}

Итак, при наведении на ссылку появляется наша линия. Давайте зададим плавность — укажем какое свойство мы будем менять и пропишем время перехода.

a::before {
	transition: width 0.35s;
}

Здесь мы указали, что переход состояния width с нуля до 100% будет длиться 0.35 секунд.

Итак, итоговый код выглядит следующим образом:

See the Pen Как сделать плавное подчеркивание для ссылки by Pelegrin (@pelegrin2puk) on CodePen.

Я показал принцип, по которому можно создавать плавное подчеркивание. Вы можете экспериментировать и менять значения. Или менять свойства. Например, вместо того, чтобы менять width с нуля до 100% поставьте значение width: 100%, но задайте, например, transform: scaleX(0), а при наведении меняйте его на scaleX(1). Пробуйте!

У нас на канале есть видео на эту тему, советуем посмотреть, если остались вопросы.

Ссылки в CSS (text-decoration, :hover, :active, :visited, :link)

По умолчанию практически во всех браузерах ссылки выглядят одинаково: они подчёркнуты чертой и имеют синий цвет. Все эти свойства можно переопределить через CSS. Для начала попробуем изменить положение черты, используя свойство text-decoration, которое может принимать значения «underline», «overline», «line-through», «none». Рассмотрим последовательно эффект от каждого.

Рассмотрим ссылку: 

<a href="/">MouseDC. ru</a>
Так будет выглядеть обычная ссылка на сайте, на котором нет никаких CSS правил (дизайн ссылки задаётся полностью браузером):
MouseDC.ru
overline ставит линию над текстом
<a href="/">MouseDC.ru</a>
результат:
MouseDC.ru
line-through перечёркивает текст посередине
<a href="/">MouseDC.ru</a>
результат:
MouseDC.ru
underline подчёркивает текст снизу (это значение по умолчанию в браузерах)
<a href="/">MouseDC.ru</a>
результат:
MouseDC.ru
none убирает подчёркивание:
<a href="/">MouseDC.ru</a>
результат:
MouseDC.ru

Состояния ссылок

Браузеры умеют понимать состояние ссылок. Этих состояний может быть несколько. Их можно отследить и задать им CSS свойства. Для этого используются псевдоклассы: «:hover» — это псевдокласс, который указывает на состояние, при котором на ссылку навели курсор мыши. Пример использования в CSS коде:
a:hover{
   font-size: 30px;
   color: red;
}

Псевдокласс «:hover» есть не только у ссылок, но и у любых других тегов. Этот псевдокласс часто применяется для создания выпадающих меню, которые появляются при наведении мышкой на пункт-родитель.

«:active» — указывает на то, что на элемент кликнули и зажали кнопку мыши, но ещё не отпустили.

«:visited» — указывает на то, что пользователь уже переходил по этой ссылке.

«:link» — псевдокласс по умолчанию. Указывает на ссылку, которую ещё не посетили.

К примеру, если вы уже переходили по ссылке на странице, то она изменяет свой цвет. Если поднести курсор мыши к ссылке, то она окрасится в другой цвет. Если кликнуть на ссылку и зажать кнопку мыши, то . Свойства таких ссылок можно задать через CSS. Попробуем это сделать, на примере использования псевдокласса «:visited«. 

a:visited {
   color: green;
}

Списки стилей CSS

заказанных списков:

  1. Кофе
  2. Чай
  3. Кока-Кола
  1. Кофе
  2. Чай
  3. Кока-Кола

Списки HTML и свойства списков CSS

В HTML есть два основных типа списков:

  • неупорядоченные списки (
      ) — элементы списка отмечены маркерами
    • упорядоченных списков (
        ) — элементы списка отмечены цифрами или буквами

    Свойства списка CSS позволяют:

    • Установка различных маркеров элементов списка для упорядоченных списков
    • Установить разные маркеры элементов списка для неупорядоченных списков
    • Установить изображение в качестве маркера элемента списка
    • Добавление цвета фона в списки и элементы списков

    Маркеры различных пунктов списка

    Свойство list-style-type определяет тип элемента списка. маркер.

    В следующем примере показаны некоторые из доступных маркеров элементов списка:

    Пример

    ul.a {
    список-стиль-тип: круг;
    }

    ul.b {
    list-style-type: квадрат;
    }

    ol.c {
    list-style-type: верхний римский алфавит;
    }

    ol.d {
    list-style-type: lower-alpha;
    }

    Попробуй сам »

    Примечание. Некоторые значения предназначены для неупорядоченных списков, а некоторые — для упорядоченных списков.

    Изображение как маркер элемента списка

    Свойство list-style-image определяет изображение как список маркер товара:

    Поместите маркеры пунктов списка

    Свойство list-style-position определяет положение маркеров элементов списка. (отверстия от пуль).

    «позиция в стиле списка: снаружи;» означает, что маркеры будут снаружи элемент списка. Начало каждой строки элемента списка будет выровнено по вертикали. По умолчанию:

    • Кофе — Сваренный напиток из обжаренных кофейных зерен …
    • Чай
    • Кока-кола

    «позиция в стиле списка: внутри;» означает, что маркеры будут внутри элемент списка. Поскольку он является частью элемента списка, он будет частью текста и нажмите текст в начале:

    • Кофе — Сваренный напиток, приготовленный из жареных кофейных зерен…
    • Чай
    • Кока-кола

    Пример

    ul.a {
    список-стиль-позиция: снаружи;
    }

    ul.b {
    list-style-position: внутри;
    }

    Попробуй сам »

    Удалить настройки по умолчанию

    Свойство list-style-type: none также может быть используется для удаления маркеров / пуль. Обратите внимание, что в списке также есть поле по умолчанию. и обивка. Чтобы удалить это, добавьте поле : 0 и отступ : 0 к

      или
        :

        Список — Сокращенное свойство

        Свойство в стиле списка является сокращенным свойством.Он используется для установки всех перечислить свойства в одном объявлении:

        При использовании сокращенного свойства порядок значений свойств следующий:

        • list-style-type (если указано list-style-image, значение этого свойства будет отображаться, если изображение по каким-то причинам невозможно отобразить)
        • list-style-position (указывает, должны ли маркеры элементов списка появляться внутри или вне потока контента)
        • list-style-image (указывает изображение как элемент списка маркер)

        Если одно из значений свойств выше отсутствует, значение по умолчанию для отсутствующее свойство будет вставлено, если таковое имеется.

        Список стилей с цветами

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

        Все, что добавлено к тегу

          или
            , влияет на весь список, в то время как свойства, добавленные в тег
          • , повлияют на отдельные элементы списка:

            Пример

            ол {
            фон: # ff9999;
            отступ: 20 пикселей;
            }

            ul {
            фон: # 3399ff;
            отступ: 20 пикселей;
            }

            ol li {
            фон: # ffe5e5;
            отступ: 5 пикселей;
            маржа слева: 35 пикселей;
            }

            ul li {
            фон: # cce5ff;
            маржа: 5 пикселей;
            }

            Результат:

            Попробуй сам »

            Другие примеры

            Настраиваемый список с красной левой границей
            В этом примере показано, как создать список с красной левой границей.

            Список с рамкой во всю ширину
            В этом примере показано, как создать список с рамкой без маркеров.

            Все разные маркеры элементов списка для списков
            В этом примере демонстрируются все различные маркеры элементов списка в CSS.

            Проверьте себя упражнениями!

            Все свойства списка CSS



            html — Установить подчеркивание текста-украшения при наведении

            html — Установить подчеркивание текста-украшения при наведении — qaru

            Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.

            Спросил

            Просмотрено 2k раз

            У меня html

            Я хочу, чтобы href подчеркивался при наведении курсора.

            Я использовал этот CSS, но все еще не происходит.

              .col .about ul li a: hover
{
   текст-оформление: подчеркивание;
}

            задан 2 мая ’15 в 12: 102015-05-02 12:10

            Сасват

            10.9k1616 золотых знаков5959 серебряных знаков131131 бронзовый знак

            1

            .Элемент col не имеет потомков от до , поэтому селектор просто не работает! Вы должны удалить часть . ~ .

Автор записи

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *