WHATEVER

Question

我试图重新创建complex.com中显示的效果，其中网站顶部的三个大面板上有一个彩色的底部边框。将鼠标悬停在面板上时，底部边框的高度会在动画效果中稍微变大。这是我认为产生效果的代码，仍然混淆了什么：之后呢。我只想动画面板或div的边框，而不是整个面板/ div。

.hero-unit--style:after {
   background: #d93347;
 }

 .hero-unit:after {
   display: block;
   height: 3px;
   background: #000;
   transition: height .2s,box-shaddow .2s;
  }
 .hero-unit:after, .hero-unit__img-shadow {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
  }

Answer 1

这是一个伪元素。它仅作为附加元素的样式效果存在。然后它的属性在悬停其拥有元素时被更改/转换。换句话说，它根本不是边界。

Per MDN

CSS :: after伪元素匹配所选元素的虚拟最后一个子元素。它通常用于通过使用内容CSS属性将化妆品内容添加到元素。默认情况下，此元素是内联的。

基本上，它的工作原理如下：

body {
  background: #c0ffee;
}
div {
  width: 50%;
  height: 150px;
  border: 1px solid lightgrey;
  background: white;
  margin: 2em auto;
  position: relative;
  /* positioning context */
}
div::after {
  content: '';
  /* required */
  position: absolute;
  bottom: 0;
  /* positioned at the bottom */
  width: 100%;
  height: 0px;
  /* no height to start */
  background: darkorange;
  transition: height .5s ease;
}
div:hover::after {
  height: 16px;
  /*finishing height */
}

<div></div>

Answer 2

只有少数事情值得您关注

hero-unit--pop-culture:after
hero-unit--style:after
hero-unit--music:after

这些仅适用于＆＃34; border＆＃34; （它不是边框，它的伪元素：之后）

然后：

.no-touch .hero-unit:hover:after

是＆＃34; border＆＃34;的高度。在悬停

.hero-unit:after {
    display: block;
    height: 3px;
    background: #000;
    transition: height 0.2s,box-shaddow 0.2s;
}

这里的height是起始高度，动画是transition: height 0.2s。这意味着它会将height属性从默认值（3px）更改为.no-touch .hero-unit:hover:after部分中设置的值。 0.2s是动画的过渡时间。

之后只有基本的：after 之类的内容，例如content: ''，这是强制性的。

希望有所帮助：）

Answer 3

其他答案很棒，他们打败了我！但是我还是会留下这个，以防我解释事情的奇怪方式对你有帮助！：d

所以..有些东西被称为＆＃34; Pseudo-Classes＆＃34;还有＆＃34; Pseudo-Elements＆＃34;。

伪元素的例子：

::前
后::
::选择

伪类的例子：

：活性
：悬停
：焦点

正如其他答案所指出的，您可能想要使用的是:hover。

它的工作原理如下：

.myClass {
    //Default styling (for when it's not being hovered)       
}

.myClass:hover {
    //Styling for when the element is hovered over.
}

您还可以添加transition属性，以便在元素悬停时添加时间延迟和/或动画效果。

<强> e.g。

transiton: .3s ease;

要回答关于:after伪元素的问题，这基本上做的是注入一小部分内容 AFTER 嵌套在所选元素中的所有其他内容，并且只是在结束标记之前。

<强> e.g。

<强> CSS：

.myClass::after {
   content: "I AM AN AFTER PSEUDO ELEMENT";
}

原始HTML：

<div class="myClass">
     <h1>WHATEVER</h1>
     <p>blah blah blah</p>
     <p>More rubbish content</p>         
</div>

应用CSS后浏览器解释的HTML：

<div class="myClass">
     <h1>WHATEVER</h1>
     <p>blah blah blah</p>
     <p>More rubbish content</p>   
     :after
</div>

您将在页面上看到的内容：

WHATEVER

blah blah blah

更多垃圾内容

我是伪劣元素之后

我希望能为您解决一些问题并帮助您解决问题！：）

如何设置本网站中底部边框的高度动画？

3 个答案:

WHATEVER