Question

如何在下方制作伪元素？因此，当我将它悬停时，它不会覆盖文本。

<a href="https://jsfiddle.net/y875wknz/">https://jsfiddle.net/y875wknz/</a>

就像这个youtube视频中的效果一样。 https://www.youtube.com/watch?v=n-seV3cls54

我想用z-index代替mix-blend-mode。但我不知道为什么它不起作用。

Answer 1

您可以将文本包装在不同的元素中并为其分配position:relative，这样就可以了。试试这段代码。

<!doctype html>
<html> 
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <a href="#"><span></span><em>Button</em></a>
  </body>
</html>

 body{
        margin: 0;
        padding: 0;
        background:#262626;
      }
       a{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width:180px;
        height:50px;
        background:#262626;
        text-transform: uppercase;
        text-align:center;
        line-height: 50px;
        color:#ff0000;
        text-decoration: none;
        font-size:20px;
        font-family:Verdana ;
        letter-spacing: 4px;
      }
      em{
        font-style: normal;
        position: relative;
        background:#262626;
        height: 50px;
        width: 180px;
        border: 2px solid transparent;
        display: block;
      }
      a::before,
      a::after,
      span::before,
      span::after
      {
        content: '';
        position: absolute;
        width: 10px;
        height: 10px;
        background: #ff0;
        z-index: -1;
        transition: 1s;

      }
      a:before
      {
        top:-2px;
        left:-2px;

      }
      a:after
         {
        top:-2px;
        right:-2px;
      }
      span:before
         {
        bottom:-2px;
        left:-2px;
      }
      span:after
         {
        bottom:-2px;
        right:-2px;
      }

      a:hover:before,
      a:hover:after,
      a:hover span:before,
      a:hover span:after
      {
        width: calc( 180px /2);
        height: calc( 50px/ 2);
      }

如何将z-index添加到伪元素

1 个答案: