How to get rid of the bottom shadow in label of the css tabs


Tags: css,tabs,positioning,shadow,box-shadow

Problem :

I'm making the css tabs with shadows. How can I get rid of the bottom shadow in label? Here's an example: http://codepen.io/ekscentrysytet/pen/QbNdEB

I've tried z-index: -1; for label:after but shadow disappears.



Solution :

What about using pseudoelement :before (you have used alreasdy after) to make a little white rectangle to hide it?

label:before {
  content:'';
  display:block;
  width:100%;
  height:15px;
  background-color:#fff;
  position:absolute;
  bottom:-11px;
  left:0;
  z-index:10;  
}

Codepen


    CSS Howto..

    How to insert image as background using CSS?

    How to remove strange border from css-animated clip-path?

    how to implement list bullets in CSS [closed]

    How to make 2 backgrounds “stick” to the sides of a centered div

    zindex + jquery: How to make my menu appear over the jquery script?

    How to resize the images to have the same height in group while keeping aspect ratio?

    Jquery Hashtag link system (show what page the user is on)

    How to apply global styles with CSS modules in a react app?

    How do I push inline elements onto the next line

    how to align button radio in css

    How to add new property within existing css?

    new google images how do they float correctly

    How to add spacing to text start in css

    How to make dropdown menu disappear after a certain amount of time JavaScript

    How to create a WoW-like cooldown effect?

    Showing ellipsis in CSS table-cell element

    How to arrange this php if-statement which outputs ratings (good, great, exxelent, etc.)?

    How can I make my form field have a background image?

    How do I lay out my content divs in a similar manner to Facebook Timeline?

    How to get and set CSS class in TinyMCE editor?

    how to change the cssclass of a div after press a button in asp.net c#?

    How to apply CSS to other elements except the hovered one?

    How does the DiggBar work?

    How to Add external Javascript and CSS for CakePhp

    How to use :before for the third
  • element?
  • my website not worked in Ipad and how I can fix some small issue? [closed]

    How can I make my jquery mobile collapsible set larger using css

    How to add a Delay on Bootstrap Dropdown Hover

    how to change css of n number of div element using jquery

    How can I get 3 lines of text on the same line and still be able to position them?