CSS :after pseudoselector does not consider text clipping - html

Question

I am trying to implement a menu item as below.
My idea was to have :after for all individual divs and add border radius to :after element in each div to get the curved shape for each menu and position the after using z-index.
But while implementing a text clipping for each menu item , the :after elements seem to position themselves away from parent div . They seem not to recognise the text is being clipped and take full width of original text.
Click here for the fiddle highlighting the problem.
Here is my implementation
.interaction-area {
height: 30px;
font-family: sans-serif;
font-size: small;
color: white;
}
.context-item__child {
height: 40px;
max-width: 200px;
line-height: 40px;
padding-left: 30px;
padding-right: 5px;
display: inline-block;
background-color: #4286f4;
border-right: 2px solid white;
border-top: 2px solid white;
border-bottom: 2px solid white;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.context-item__child:after {
height: 40px;
width: 30px;
top: 8px;
position: absolute;
display: inline-block;
z-index: 1;
background-color: #4286f4;
border-right: 2px solid white;
border-top: 2px solid white;
border-bottom: 2px solid white;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
content: '';
}
<div class="interaction-area">
<div class="context-item__child">T</div>
<div class="context-item__child">DE FINIBUS BONORUM ET MALO</div>
<div class="context-item__child">NIHIL IMPEDIT QUO MINUS ID QUOD MAXIME</div>
<div class="context-item__child">DE FINIBUS BONORUM ET MALORUM</div>
<div class="context-item__child">NIHIL IMPEDIT QUO MINUS ID QUOD MAXIME</div>
</div>
Could you guide me what i am missing to make it work? Or is there a better way to approach the problem?

Answer 1

You could use Flexbox for ul and pseudo-elements to add that rounded border. You can create half circle with border-radius but then you also need to hide part of it with another pseudo-element so that it looks nice when li breaks to new line
* {
box-sizing: border-box;
}
ul {
display: flex;
flex-wrap: wrap;
list-style: none;
height: 40px;
}
li {
background: #498FF1;
position: relative;
height: 40px;
line-height: 40px;
padding: 0 30px;
color: white;
}
li:not(:first-child) {
padding-right: 30px;
}
li:after, li:before {
position: absolute;
content: '';
left: 100%;
height: 39px;
width: 39px;
border-bottom: 1px solid white;
border-right: 1px solid white;
border-radius: 50%;
transform: translateX(-50%) rotate(-45deg);
z-index: 1;
background: #498FF1;
}
li:after {
z-index: 2;
background: #498FF1;
border-radius: 0;
transform: rotate(0) translatex(-20px);
border: 1px solid #498FF1;
height: 38px;
top: 0;
width: 20px;
}
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum </li>
<li>Lorem ipsum dolor.</li>
<li>Lorem.</li>
</ul>

Answer 2

use :after alongside position:relative and flexbox.
You would need to optimise this a bit more... but I am sure you can handle it
.interaction-area {
height: 30px;
font-family: sans-serif;
font-size: small;
color: white;
position: relative; /* position relative */
display:flex; /* display flex */
width: auto;
}
.context-item__child {
height: 40px;
max-width: 200px;
line-height: 40px;
padding-left: 30px;
padding-right: 20px; /* adjust padding */
background-color: #4286f4;
border-right: 0 solid white;
border-top: 2px solid white;
border-bottom: 2px solid white;
text-align: center;
white-space: nowrap;
overflow: hidden;
position: relative; /* position relative */
text-overflow: ellipsis;
}
.context-item__child:first-child:before {
display:none;
}
.context-item__child:before { /* changed to next element's before */
height: 40px;
width: 30px;
top: -2px; /* fix for border */
left:-10px;
position: absolute;
z-index: 1;
background-color: #4286f4;
border-right: 2px solid white;
border-top: 2px solid white;
border-bottom: 2px solid white;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
content: '';
}
.context-item__child:last-child { /* changed to next element's before */
padding-right: 40px;
}
.interaction-area:after { /* changed to next element's before */
height: 40px;
width: 30px;
top: -2px;
right: 0;
z-index: 1;
background-color: #4286f4;
border-right: 2px solid white;
border-top: 2px solid white;
border-bottom: 2px solid white;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
content: '';
}
<body>
<div class="interaction-area">
<div class="context-item__child">T</div>
<div class="context-item__child">DE FINIBUS BONORUM ET MALO</div>
<div class="context-item__child">NIHIL IMPEDIT QUO MINUS ID QUOD MAXIME</div>
<div class="context-item__child">DE FINIBUS BONORUM ET MALORUM</div>
<div class="context-item__child">NIHIL IMPEDIT QUO MINUS ID QUOD MAXIME</div>
</div>
</body>

Answer 3

Here is how I'd do this:
.interaction-area {
height: 30px;
font-family: sans-serif;
font-size: small;
color: white;
}
.context-item__child {
height: 40px;
max-width: 200px;
line-height: 40px;
padding-left: 40px;
padding-right: 30px;
display: inline-block;
background-color: #4286f4;
border-top: 2px solid white;
border-bottom: 2px solid white;
text-align: center;
position: relative;
float: left;
border-radius: 0 22px 22px 0;
margin-left: -30px;
}
.context-item__child:last-child {
}
.context-item__child span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
display: inline-block;
}
.context-item__child:after {
height: 40px;
width: 30px;
right: 0;
top: -2px;
position: absolute;
display: inline-block;
z-index: 1;
background-color: #4286f4;
border-right: 2px solid white;
border-top: 2px solid white;
border-bottom: 2px solid white;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
content: '';
}
<body>
<div class="interaction-area">
<div class="context-item__child"><span>T</span></div>
<div class="context-item__child"><span>DE FINIBUS BONORUM ET MALO</span></div>
<div class="context-item__child"><span>NIHIL IMPEDIT QUO MINUS ID QUOD MAXIME</span></div>
<div class="context-item__child"><span>DE FINIBUS BONORUM ET MALORUM</span></div>
<div class="context-item__child"><span>NIHIL IMPEDIT QUO MINUS ID QUOD MAXIME</span></div>
</div>
</body>
What I did was:
moved the ellipsis down a level
applied position:relative to the menu items so their pseudo-elements would be positioned relative to them
made each item have the proper border-radius so they could wrap without breaking UI.
adjusted paddings/margins to the new changes.