Efekt najazdu: rozwiń dolną granicę

Próbuję uzyskać Efekt przejścia na granicy że granica rozszerza się po najechaniu. 

h1 {
  color: #666;
}

h1:after {
  position: absolute;
  left: 10px;
  content: '';
  height: 40px;
  width: 275px;
  border-bottom: solid 3px #019fb6;
  transition: left 250ms ease-in-out, right 250ms ease-in-out;
  opacity: 0;
}

h1:hover:after {
  opacity: 1;
}
<h1>CSS IS AWESOME</h1>

Próbowałem tego na Jsfiddle

Author: web-tiki, 2015-02-20
Source

7 answers

Do rozwiń dolną granicę po najechaniu kursorem , możesz użyć transform:scaleX'(); (mdn reference ) i przejście z 0 do 1 w stanie hover.

Oto przykład jak może wyglądać efekt najazdu na krawędź : Rozwiń efekt najazdu krawędzi

Obramowanie i przejście są ustawione na pseudo elemencie , aby zapobiec przenoszeniu tekstu i unikaniu dodawania znaczników.
Aby rozwinąć dolną granicę z lewej lub prawej strony, możesz zmienić właściwość transform-origin na lewą lub prawo pseudo elementu: 

h1 { color: #666;display:inline-block; margin:0;text-transform:uppercase; }
h1:after {
  display:block;
  content: '';
  border-bottom: solid 3px #019fb6;  
  transform: scaleX(0);  
  transition: transform 250ms ease-in-out;
}
h1:hover:after { transform: scaleX(1); }
h1.fromRight:after{ transform-origin:100% 50%; }
h1.fromLeft:after{  transform-origin:  0% 50%; }
<h1 class="fromCenter">Expand from center</h1><br/>
<h1 class="fromRight">Expand from right</h1><br/>
<h1 class="fromLeft">Expand from left</h1>

uwaga: aby zmaksymalizować obsługę przeglądarki, musisz dodać prefiksy dostawców (zobacz canIuse).

Rozwiń dolną granicę po najechaniu kursorem o 2 linie

Można osiągnąć ten efekt, gdy tekst rozciąga się na 2 linie. Element przed pseudo jest absolutnie umieszczony, aby podkreślić pierwszą linię za pomocą bottom:1.2em;: 

h1 { position:relative;color: #666;display:inline-block; margin:0;text-transform:uppercase;text-align:center;line-height:1.2em; }
h1:after, h1:before {
  display:block;
  content: '';
  border-bottom: solid 3px #019fb6;  
  transform: scaleX(0);  
  transition: transform 250ms ease-in-out;
}
h1:before{
  position:absolute;
  bottom:1.2em; left:0;
  width:100%;
}
.ef2:hover:after {
  transition-delay:150ms;
}
  
h1:hover:after, h1:hover:before { transform: scaleX(1); }
<h1>Expand border<br/>on two lines</h1>
<br/>
<br/>
<h1 class="ef2">Expand border<br/>effect two</h1>

Inny kierunek przejścia na hover in and out:

Chodzi o to, aby zmienić pozycję pochodzenia transformaty z jednej strony na drugą w stanie zawisania. W ten sposób dolny boder wchodzi z jednej strony na hover i wychodzi z drugiej , gdy element nie jest już uniesiony.
Oto demo: 

h1 { color: #666;display:inline-block; margin:0;text-transform:uppercase; }
h1:after {
  display:block;
  content: '';
  border-bottom: solid 3px #019fb6;  
  transform: scaleX(0);  
  transition: transform 250ms ease-in-out;
}
h1.fromLeft:after{ transform-origin: 100% 50%; }
h1.fromRight:after{  transform-origin:   0% 50%; }
h1.fromLeft:hover:after{ transform: scaleX(1); transform-origin:   0% 50%; }
h1.fromRight:hover:after{ transform: scaleX(1); transform-origin: 100% 50%; }
<h1 class="fromRight">Expand from right</h1><br/>
<h1 class="fromLeft">Expand from left</h1>
 104
Author: web-tiki,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-08-20 13:13:57

Wiem, że to jest stary post i już odpowiedział, ale może spodoba ci się następujący efekt. 

<div class="cd-single-point">
    <a class="cd-img-replace" href="#0"></a>
</div>

   .cd-single-point {
    position: absolute;
    list-style-type: none;
    left: 20px;
    top: 20px;
  }

  .cd-single-point>a {
      position: relative;
      z-index: 2;
      display: block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #0079ff;
      -webkit-transition: background-color 0.2s;
      -moz-transition: background-color 0.2s;
      -o-transition: background-color 0.2s;
      transition: background-color 0.2s;
  }

  .cd-single-point::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    animation: cd-pulse 2s infinite;
  }

  @keyframes cd-pulse
  {
  0%  {box-shadow:0 0 0 0 #0079ff}
  100%{box-shadow:0 0 0 20px rgba(255,150,44,0)}
  }

DEMO

 4
Author: Philip Enc,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-25 17:59:09

Możemy zrobić za pomocą prostego efektu przejścia.

HTML 

<h1>CSS IS AWESOME</h1>

CSS 

h1 {
    color: #666;
    position: relative;
    display: inline-block;
}

h1:after {
    position: absolute;
    left: 50%;
    content: '';
    height: 40px;
    height: 5px;
    background: #f00;
    transition: all 0.5s linear;
    width: 0;
    bottom: 0;  
}

h1:hover:after {
    width: 270px;
    margin-left: -135px;
}

Link do

 2
Author: Raju Shrestha,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-20 09:23:47 
transition: all 1000ms ease-in-out;

Demo

A może szukasz tego

Demo2

 1
Author: himanshu,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-20 07:15:34 

h1 {
  color: #666;
  display:inline-block;
  margin:0;
  text-transform:uppercase;
 }
h1:after {
  display:block;
  content: '';
  border-bottom: solid 3px #92a8d1;  
  transform: scaleX(0);  
  transition: transform 800ms ease-in-out;
}
h1:hover:after {
 transform: scaleX(1);
}
<h1 class="fromCenter">Hover Over Me</h1><br/>
 1
Author: Mohammad Ayoub Khan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-13 10:53:56 

h1 {
  color: #666;
}

h1:after {
  position: absolute;
  left: 10px;
  content: '';
  height: 40px;
  width: 275px;
  border-bottom: solid 3px #019fb6;
  transition: opacity 450ms ease-in-out;
  opacity: 0;
}

h1:hover:after {
  opacity: 1;
}
<h1>CSS IS AWESOME</h1>
 0
Author: Mohammad Ayoub Khan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-13 10:42:04

Prosta i lekka wersja 

li {
    margin-bottom: 10px;
}

.cool-link {
    display: inline-block;
    color: #000;
    text-decoration: none;
}

.cool-link::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #000;
    transition: width .3s;
}

.cool-link:hover::after {
    width: 100%;
    //transition: width .3s;
}
<ul>
    <li><a class="cool-link" href="#">A cool link</a></li>
    <li><a class="cool-link" href="#">A cool link</a></li>
    <li><a class="cool-link" href="#">A cool link</a></li>
</ul>
 0
Author: levani jincharadze,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-15 21:48:42