zoukankan      html  css  js  c++  java
  • 伪元素小特效

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <style>
        * {
          margin: 0;
          padding: 0;
        }
    
        a {
          text-decoration: none;
          color: #555;
          outline: none;
          cursor: pointer;
          border-bottom: 1px solid #999;
        }
    
        /* line-link */
        .line-link {
          position: relative;
          display: inline-block;
          border-bottom: none;
        }
    
        .line-link:hover::before {
          visibility: visible;
          transform: scaleX(1);
        }
    
        .line-link::before {
          content: "";
          position: absolute;
          width: 100%;
          height: 2px;
          bottom: 0;
          left: 0;
          background-color: #000;
          visibility: hidden;
          transform: scaleX(0);
          transition-duration: 0.2s;
          transition-timing-function: ease-in-out;
          transition-delay: 0s;
        }
    
        /* bg-link */
        .bg-link {
          display: inline-block;
          padding: 0 20px;
          font-size: 14px;
          color: #555;
          background: #fff;
          border: 2px solid #555;
          text-decoration: none;
          border-radius: 2px;
          transition-property: background-color;
          transition-duration: 0.2s;
          transition-timing-function: ease-in-out;
          transition-delay: 0s;
          line-height: 2;
        }
        .bg-link:hover{
          border-color: #222;
          color: #fff;
          background: #222;
        }
      </style>
    </head>
    
    <body>
      <a href="#" class="line-link">line link</a>
      <a href="#" class="bg-link">bg link</a>
    </body>
    
    </html>
    View Code

    后语:

    伪元素 + 组合变形 == 万千世界

  • 相关阅读:
    vfork与fork的区别
    常见的六种设计模式以及应用场景
    Java中常见的集合类比较
    排序——总结
    排序——交换排序
    排序——选择排序
    排序——归并排序
    排序——基数排序
    排序——插入排序
    设计模式
  • 原文地址:https://www.cnblogs.com/justSmile2/p/10718677.html
Copyright © 2011-2022 走看看