How to hide overflowing text when using pseudo elements (:before & :after)?


I am working on an advanced style for an angled tab that sits on a content div.

I have just about solved it, following create suggestions to follow :before and :after to shape the div. However, I am stuck trying to get the div itself to use max-width instead of width:


<div class="tab">Really really really really really really long content title</div>
<div class="tab-content">Content text</div>



tab-content, .tab, .tab:before, .tab:after {
    background-color: #f5f5f5;
body {
    background-color: #666;
.tab-content {
    border-left: 1px solid blue;
    border-right: 1px solid blue;
    border-bottom: 1px solid blue;
    border-top: 1px solid blue;
    margin-top: -1px;
.tab:before {
.tab {
    max-width: 150px;
    border-left: 1px solid blue;
    border-top: 1px solid blue;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    height: 50px;
    border-radius: 15px 100px 0px 0px;
    position: relative;
    z-index: 100000000;
.tab:after {
    border-right: 1px solid blue;
    border-top: 1px solid blue;
    border-top-left-radius: 0px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 00px;
    display: block;
    content:" ";
    width: 150px;
    height: 50px;
    top: -1px;
    position: absolute;
    right: -28px;
    z-index: -1;

Any ideas?

jsFiddle here:

Problem courtesy of: alias51


If you are not too particular about semantics, you could try:

<div class="tab"><div>Really really really really really...</div></div>

and add the following CSS rule:

.tab div {
    outline: 1px dotted blue; /* for demo only... */
    overflow: hidden;
    height: inherit;

the child <div> could be replaced by a header, which may help with SEO.


Solution courtesy of: Marc Audet


One way is to set the text color to transparent on the .tab, and then use the :first-line pseudo element to only set the text on the first line to have a color.

.tab {
    color: transparent;
    color: #000;

Here's a jsFiddle


I have had a bit of a tinker with it and I think an even nicer solution is to set the font-size and line-height on .tab to 0px. And then just set them to whatever you like using the :first-line pseudo element. This way the invisible lines won't become visible when text is selected (which is an issue with my original answer).

.tab:first-line {
    font-size: 16px;
    line-height: 50px;
.tab {
    font-size: 0px;
    line-height: 0px;

Here's a jsFiddle for this approach.

Discussion courtesy of: Mathijs Flietstra

This recipe can be found in it's original form on Stack Over Flow.