如何获得伪元素以尊重直亲父母的宽度而忽略兄弟姐妹的宽度

时间：2019-12-04 20:31:03

标签： html css sass

我有几列项目，将它们悬停时将显示动画的下划线效果。我遇到的问题是，每列中文本最多的项目正在为其所有兄弟姐妹设置宽度。例如，即使一个项目的内容比另一个项目的内容短得多，同一列中的两个项目将具有相同的伪元素宽度。

.wrap {
	 display: flex;
	 justify-content: center;
	 align-items: flex-start;
	 margin-top: 20px;
}
 .container {
	 display: flex;
	 flex-direction: column;
	 margin: 0 3vw;
}
 .item {
	 margin: 10px 0;
	 text-decoration: none;
	 color: #444;
	 font-weight: bold;
	 font-size: 19px;
	 letter-spacing: 2px;
	 position: relative;
	 display: block;
   font-size: 12px;
}
 .item::after {
	 position: absolute;
	 display: block;
	 content: '';
	 width: 100%;
	 left: 0;
	 transform: scaleX(0);
	 bottom: 0;
	 transition: 0.4s transform ease-in-out;
	 border-bottom: solid 2px tomato;
	 transform-origin: 100% 50%;
}
 .item:hover::after {
	 transform: scaleX(1);
	 transform-origin: 0 50%;
}
<div class="wrap">
  <div class="container">
  <a href="#" class="item">Long Phrase Goes Here</a>
  <a href="#" class="item">Test Test</a>
  <a href="#" class="item">Test Test</a>
  <a href="#" class="item">Test Test</a>
  <a href="#" class="item">Test Test</a>
</div>
<div class="container">
  <a href="#" class="item">Long Phrase Goes Here</a>
  <a href="#" class="item">Test Test</a>
  <a href="#" class="item">Test Test</a>
  <a href="#" class="item">Test Test</a>
  <a href="#" class="item">Test Test</a>
</div>
</div>

3 个答案:

答案 0 :(得分：2)

您可以在align-items: flex-start上添加.container，以便使项目占据其内容的宽度：

.wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 20px;
}

.container {
  display: flex;
  flex-direction: column;
  margin: 0 3vw;
  align-items: flex-start;
}

.item {
  margin: 10px 0;
  text-decoration: none;
  color: #444;
  font-weight: bold;
  font-size: 19px;
  letter-spacing: 2px;
  position: relative;
  display: block;
  font-size: 12px;
}

.item::after {
  position: absolute;
  display: block;
  content: '';
  width: 100%;
  left: 0;
  transform: scaleX(0);
  bottom: 0;
  transition: 0.4s transform ease-in-out;
  border-bottom: solid 2px tomato;
  transform-origin: 100% 50%;
}

.item:hover::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}
<div class="wrap">
  <div class="container">
    <a href="#" class="item">Long Phrase Goes Here</a>
    <a href="#" class="item">Test Test</a>
    <a href="#" class="item">Test Test</a>
    <a href="#" class="item">Test Test</a>
    <a href="#" class="item">Test Test</a>
  </div>
  <div class="container">
    <a href="#" class="item">Long Phrase Goes Here</a>
    <a href="#" class="item">Test Test</a>
    <a href="#" class="item">Test Test</a>
    <a href="#" class="item">Test Test</a>
    <a href="#" class="item">Test Test</a>
  </div>
</div>

答案 1 :(得分：2)

一种可能的解决方案是将margin-right:auto添加到所有.item 

.wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 20px;
}

.container {
  display: flex;
  flex-direction: column;
  margin: 0 3vw;
}

.item {
  margin: 10px 0;
  text-decoration: none;
  color: #444;
  font-weight: bold;
  font-size: 19px;
  letter-spacing: 2px;
  position: relative;
  font-size: 12px;
  
  display: block; /* Not really needed */
  margin-right: auto; /* Added */
  
  /* to visualize  */
  border: 1px solid;
  padding: 10px;
}

.item::after {
  position: absolute;
  display: block;
  content: '';
  width: 100%;
  left: 0;
  transform: scaleX(0);
  bottom: 0;
  transition: 0.4s transform ease-in-out;
  border-bottom: solid 2px tomato;
  transform-origin: 100% 50%;
}

.item:hover::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}
<div class="wrap">
  <div class="container">
    <a href="#" class="item">Long Phrase Goes Here</a>
    <a href="#" class="item">Test Test</a>
    <a href="#" class="item">Test Test</a>
    <a href="#" class="item">Test Test</a>
    <a href="#" class="item">Test Test</a>
  </div>
  <div class="container">
    <a href="#" class="item">Long Phrase Goes Here</a>
    <a href="#" class="item">Test Test</a>
    <a href="#" class="item">Test Test</a>
    <a href="#" class="item">Test Test</a>
    <a href="#" class="item">Test Test</a>
  </div>
</div>

答案 2 :(得分：1)

display:block上的

.item导致了此...为达到您想要的效果，如第一列/容器ul li中>以下代码：

.wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 20vh;
}

.container {
  display: block;
  flex-direction: column;
  margin: 0 3vw;
}

.container:nth-child(2) .item,
.container:nth-child(3) .item {
  display: block;
}

.item {
  margin: 10px 0;
  text-decoration: none;
  color: #444;
  font-weight: bold;
  font-size: 19px;
  letter-spacing: 2px;
  position: relative;
}

.item::after {
  position: absolute;
  display: inline-block;
  content: '';
  width: 100%;
  left: 0;
  transform: scaleX(0);
  bottom: 0;
  transition: 0.4s transform ease-in-out;
  border-bottom: solid 2px tomato;
  transform-origin: 100% 50%;
}

.item:hover::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}

.container ul li {
  list-style: none;
  margin: 10px 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="wrap">
  <div class="container">
    <ul>
      <li> <a href="#" class="item">Long Phrase Goes Here</a> </li>
      <li> <a href="#" class="item">Test Test</a> </li>
      <li> <a href="#" class="item">Test Test</a> </li>
      <li> <a href="#" class="item">Test Test</a> </li>
      <li> <a href="#" class="item">Test Test</a> </li>
    </ul>

  </div>
  <div class="container">
    <a href="#" class="item">Long Phrase Goes Here</a>
    <a href="#" class="item">Test Test</a>
    <a href="#" class="item">Test Test</a>
    <a href="#" class="item">Test Test</a>
    <a href="#" class="item">Test Test</a>
  </div>
  <div class="container">
    <a href="#" class="item">Long Phrase Goes Here</a>
    <a href="#" class="item">Test Test</a>
    <a href="#" class="item">Test Test</a>
    <a href="#" class="item">Test Test</a>
    <a href="#" class="item">Test Test</a>
    <a href="#" class="item">Test Test</a>
  </div>
</div>

相关问题
最新问题