html - 高度随::和相对位置而变化

我正在面对我的div的行为，我无法解决，也许您知道一个窍门。我正在尝试做一个水平列表，当您将鼠标悬停在上面时会改变背景，并向下方显示一个小箭头。我决定使用伪类:: after来显示箭头，将其显示为块放置在单词下并具有相对位置，以便可以轻松地将其居中。问题是当我这样做时，列表div的高度会改变，这非常丑陋。我尝试了绝对位置，但是它非常重复且效率很低，是否有消除此行为的技巧？

.liste--horizontal
{
    list-style: none;
    display: flex;
    justify-content: space-between;
    color: black;
}

.portfolio_selection
{
    background-color: rgb(223, 222, 222);
    padding: 0%;
    margin-top: 4%;
}

.portfolio_selection_critere
{
    padding: 10px;
}

.portfolio_selection_critere:hover
{
    color: rgba(255, 255, 255, 1);
    background-color: #3491b2;
    box-shadow: 0 3px 0 #277088;

}

.portfolio_selection_critere:hover::after
{
    content: "";
    display: block;
    font-size: 0em;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #277088;
    position: relative;
    top: 80%;
    left: 0%;
    right: 0%;
    margin: auto;
}

<ul class="portfolio_selection liste--horizontal">
            <li class="portfolio_selection_critere">All works</li>
            <li class="portfolio_selection_critere">Creative</li>
            <li class="portfolio_selection_critere">Corporate</li>
            <li class="portfolio_selection_critere">Portfolio</li>
</ul>

最佳答案

一个简单的解决方案是使箭头处于非悬停状态，而您只需在悬停状态下调整其颜色和/或不透明度即可：

.liste--horizontal {
  list-style: none;
  display: flex;
  justify-content: space-between;
  color: black;
}

.portfolio_selection {
  background-color: rgb(223, 222, 222);
  padding: 0%;
  margin-top: 4%;
}

.portfolio_selection_critere {
  padding: 10px;
}

.portfolio_selection_critere:hover {
  color: rgba(255, 255, 255, 1);
  background-color: #3491b2;
  box-shadow: 0 3px 0 #277088;
}

.portfolio_selection_critere:after {
  content: "";
  display: block;
  font-size: 0em;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #277088;
  position: relative;
  top: 80%;
  margin: auto;
  opacity: 0;
}

.portfolio_selection_critere:hover::after {
  opacity: 1;
}

<ul class="portfolio_selection liste--horizontal">
  <li class="portfolio_selection_critere">All works</li>
  <li class="portfolio_selection_critere">Creative</li>
  <li class="portfolio_selection_critere">Corporate</li>
  <li class="portfolio_selection_critere">Portfolio</li>
</ul>

如果您不希望高度增加，请使其绝对位置并调整top / left的值：

.liste--horizontal {
  list-style: none;
  display: flex;
  justify-content: space-between;
  color: black;
}

.portfolio_selection {
  background-color: rgb(223, 222, 222);
  padding: 0;
  margin-top: 4%;
}

.portfolio_selection_critere {
  padding: 10px;
  position:relative;
}

.portfolio_selection_critere:hover {
  color: rgba(255, 255, 255, 1);
  background-color: #3491b2;
  box-shadow: 0 3px 0 #277088;
}

.portfolio_selection_critere:after {
  content: "";
  position:absolute;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #277088;
  top:100%;
  left:calc(50% - 10px);
  opacity: 0;
}

.portfolio_selection_critere:hover::after {
  opacity: 1;
}

<ul class="portfolio_selection liste--horizontal">
  <li class="portfolio_selection_critere">All works</li>
  <li class="portfolio_selection_critere">Creative</li>
  <li class="portfolio_selection_critere">Corporate</li>
  <li class="portfolio_selection_critere">Portfolio</li>
</ul>