时间戳

首页 > 解决方案 > 更改小型设备的 :after 元素的属性

jquery - 更改小型设备的 :after 元素的属性

问题描述

我想改变下划线链接效果的高度以适应不同的视口，这是我的css。

a,a:visited,a:hover,a:active{
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    position:relative;
    transition:0.5s color ease;
    text-decoration:none;
}
a.after:after{
    content: "";
    transition:0.5s all ease;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    position:absolute;
}
a.after:after{
    bottom:-0.03em;
    height:0.15em;
    width:0;
    background:#d73444;
}
a:after{
    left:50.3%;
    -webkit-transform:translateX(-50%);
    transform:translateX(-50%);
}
a.after:hover:after{
    width: 100%;
}

所以我想以某种方式更改 a.after:after (height) 以适应不同的分辨率，有没有办法用 css 或 jquery 来做到这一点，有没有我可以用来让它工作的库？

标签： jquerycssmedia-queries

解决方案

CSS3 媒体查询正是用于此目的。

例如，由于您想更改heightin，a.after:after您可以执行以下操作：

@media (max-width: 400px){
    a.after:after {
      height: 1em;
   }
}

只要视口的宽度不大于 400 像素，它将用括号内的样式替换您对该元素已有的任何当前样式。一旦大于 400 像素，这些样式将不再应用。

推荐阅读