Is there a CSS selector that can prevent content insertion on new lines when using the wrap feature in CSS-Flexbox?
I am utilizing CSS-Flexbox for a layout with the wrap option, but I do not know the number of lines beforehand. I need a solution where the pseudo selector "before" will not add content at every newline or wrap in the layout.
Here is an example to illustrate the issue:
.items {
background-color: yellow;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: flex-start;
max-width: 400px;
}
.item {
position: relative;
padding: 0.25rem 0.5rem;
display: block;
border: 1px solid red;
}
.item:first-of-type:before {
content: '';
}
.item:before {
content: '\01F354';
}<div class="items">
<div class="item">
item 1
</div>
<div class="item">
item 2
</div>
<div class="item">
item 3
</div>
<div class="item">
item 4
</div>
<div class="item">
item A
</div>
<div class="item">
item B
</div>
<div class="item">
item C
</div>
<div class="item">
item D
</div>
</div>In my scenario, I need to ensure that on the second line, the first item does not display a burger icon.