JSFiddle - React, Tailwind, and code Playground

by drublic

HTML

<p>The problem is: I want the text of the long item to flow over the pseudo-element (:after) /wo wrapping the inner text with a span or any extra markup.</p>

<ul>
    <li><a href="#">List 1</a></li>
    <li class="active"><a href="#">Long List Item which my break.....</a></li>
    <li><a href="#">List 3</a></li>
</ul>

CSS

ul { width: 300px; background: #eee; }
ul a {
    position: relative; z-index: 1;
    display: block;
    padding: 8px 0 6px;
}
ul .active {
    position: relative;
    background: #fff;
    -moz-box-shadow: 0 1px 5px #aaa;
    -webkit-box-shadow: 0 1px 5px #aaa;
    box-shadow: 0 1px 5px #aaa;
}
ul .active:before,
ul .active:after,
ul .active a:after {
    display: block; content: '\0020';
    position: absolute; top: -7px; left: -5px; bottom: -10px;
    width: 5px;
    background: #fff;
}
ul .active:after {
    left: auto; right: 100px;
    width: 100px;
    background-color: transparent;
    background-image: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1));
    background-image:    -moz-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1));
    background-image:         linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1));
}

ul .active a:after {
    position: static; float: right;
    margin: -33px -10px 0 0;
    width: 110px; height: 49px;
}