Question

在手机上进行媒体查询时，我需要将悬停按钮的边框底部减小到某个px，这是怎么做的？在下面的笔记本电脑上可以正常工作，只是单词的长度，而在手机上，边框的底部是屏幕的100％，而且太长。

@media (min-width:299px) and (max-width:567px){

 .region-li{
   display: block;
   margin-right:20px;
   margin-left:20px;
   font-size:16px;
   font-family: 'codec_cold_triallight';
   color:#666666;
   padding: 8px;
   cursor: pointer;
   text-transform: uppercase;}

   li:hover{
     border-bottom:3px solid #666666;}

Answer 1

为此，您可以使用伪元素（例如:after）代替border-bottom。与border相比，使用伪元素将获得更多控制。

除了:focus外，还应该添加:hover等状态，以支持移动设备。

.region-li{
   display: inline-block;
   margin-right:20px;
   margin-left:20px;
   font-size:16px;
   font-family: 'codec_cold_triallight';
   color:#666666;
   padding: 8px;
   cursor: pointer;
   text-transform: uppercase;}

   li:hover{
     border-bottom:3px solid #666666;}
   
   .region-li-2{
     position: relative;
   }
   .region-li-2:after{
  content: "";
  display: block;
  width: 60%;
  position: absolute;
  height: 2px;
  background-color: orange;
  transform: translateX(-50%);
  margin-left: 50%;
  left: 0;
  bottom: 0;
  opacity: 0;
}
.region-li-2:hover{
  border-bottom: none;
}
.region-li-2:hover:after{
   opacity: 1;
}

<ul>
  <li class="region-li">Button 1</li>
  
  <li class="region-li region-li-2">Button 2</li>
</ul>

边框底部保留一定的长度，而不是100％

1 个答案: