主页 / 问题 / 1372077
Accepted
Stop-TussiN
Asked:2022-06-17 00:06:37 +0000 UTC2022-06-17 00:06:37 +0000 UTC

如何在 CSS 中提高边框底部？

  • 772

如何设置“选择城市”一词的样式以使下划线升高。需要更改的是 ul.menu li:last-child a 类。别人不能碰。

ul.menu {
list-style:none;
}
.menu li a {
    height: 37px;
    font-size: 17px;
    margin: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration:none;
}
aside a {
    color: #fff;
}
ul.menu li:last-child a {
   border-bottom:1px solid #000;
}
<ul class="menu"><li class=""><div class="custom-checkbox"><a href="/?city=Екатеринбург">Екатеринбург</a></div></li><li class=""><div class="custom-checkbox"><a href="/?city=Выбрать город">Выбрать город</a></div></li></ul>

css

2 个回答

  1. Best Answer

    ul.menu {
list-style:none;
}
.menu li a {
    height: 37px;
    font-size: 17px;
    margin: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration:none;
}
aside a {
    color: #fff;
}
ul.menu li:last-child a {
   border-bottom: 1px solid #000;
   height: 20px;
   padding: 5px 0;
}
    <ul class="menu"><li class=""><div class="custom-checkbox"><a href="/?city=Екатеринбург">Екатеринбург</a></div></li><li class=""><div class="custom-checkbox"><a href="/?city=Выбрать город">Выбрать город</a></div></li></ul>

    • 1

  2. 例子

    ul.menu {
  list-style: none;
}

.menu li a {
  height: 37px;
  font-size: 17px;
  margin: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  position: relative;
}

aside a {
  color: #fff;
}

ul.menu li:last-child a:before {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #000;
}
    <ul class="menu">
  <li class="">
    <div class="custom-checkbox"><a href="/?city=Екатеринбург">Екатеринбург</a></div>
  </li>
  <li class="">
    <div class="custom-checkbox"><a href="/?city=Выбрать город">Выбрать город</a></div>
  </li>
</ul>

    • 0

相关问题