时间戳

首页 > 解决方案 > 边框底部保持一定长度而不是 100%

css - 边框底部保持一定长度而不是 100%

问题描述

通过手机上的媒体查询，我需要将悬停时按钮的边框底部减少到某个像素，这是如何完成的？在下面的笔记本电脑上工作正常，只是单词的长度，但在手机上，边框底部是屏幕的 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;}

标签： css

解决方案

: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>

推荐阅读