如何让伪元素尊重直接父元素的宽度并忽略兄弟元素的宽度

Question

I have a few columns of items that when hovered will display an animated underline effect. The issue I am having is that the item in each column with the most text is setting the width for all of it's siblings. For example, two items in the same column will have the same pseudo element width, even if one of the item's content is much shorter than the other.

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

Answer 1

You can just add align-items: flex-start on .container so the items will take the width of their content:

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

Answer 2

One Possible solution is to add margin-right:auto to all .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>

Answer 3

display:block on .item is causing this... for the effect that you want, have each item inside a ul li as in the first column/container of the code below:

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