Pseudo element bahaving strangely

HTML-CSS
1

Hello everyone,

I am currently setting up a navigation element for a CMS. I cannot control the text that goes into each li. This element needs to work regardless of how much text the user puts in the li. The HTML is also auto generated by the CMS I am using, I cannot change the markup.

Here is the code:

<style>

.navigation-root {
  padding: 10px 0;
  display: flex;
  background-color: #d3d3d3;
}

.navigation-item {
  flex: 1 1 0;
  margin: 10px;
  font-size: 18px;
  font-weight: 500;
  line-height: 18px;
  display: flex;
  background-color: #fff;
  text-align: center;
  list-style-type: none;
}

.navigation-item a {
  color: black;
  width: 100%;
  padding: 10px;
  border: 2px solid #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navigation-item a::after {
  content: "â—˘";
  display: inline-block;
  transform: rotate(-45deg);
  font-size: 12px;
}

</style>

<div class="navigation">

  <ul class="navigation-root">

   <li class="navigation-item"> 
    <a href="#">Handbags</a> 
   </li>

   <li class="navigation-item"> 
    <a href="#">Tops & T-shirts</a> 
   </li>

   <li class="navigation-item"> 
    <a href="#">Nightwear & Loungewear</a> 
   </li>

   <li class="navigation-item"> 
    <a href="#">Jeans</a> 
   </li>

   <li class="navigation-item"> 
    <a href="#">Knitwear</a> 
   </li>

  </ul>

</div>

The ::after pseudo element behaves how I would like to to when it is placed after text that is on one line. However when the text goes to two lines then it seems to get pushed to the end of the container and does not move.

Could anyone give any insights as to why the ::after pseudo element behaves differently when the text breaks onto two lines?

2

I’ve been playing around with your code and I couldn’t find the “best” approach to keep allowing the text to wrap, so my fix was to add:

.navigation-item a {
    white-space: nowrap;
}

This will force the text to stay on the same row, so it will have the arrow next to it.

1 Like
3

Because you’re using display: flex in your parent element (default flex-direction: row)

That’s why all your direct child elements will be on the same row (text is a element that will auto-break itself)

if you want your child element gonna be in 2 lines in smaller screens. make your parent element flex-wrap:wrap for auto-break new line.

1 Like
4