1 reply [Last post]
gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 5 years 3 days ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

hey guys ! look at the below code :

li.tab-current:before,
li.tab-current:after{
	content: '';
	position: absolute;
	bottom: 0;
	left: 100%;
	height: 1px;
	width: 1000px;
	background:#BECBD2;
	z-index: 999;
}
 
li.tab-current:before{
	right: 100%;
	width: 4000px;
}

now CSS stands for cascading style sheets . right now i am having a problem with the cascading part of css .

the above does't work . what i am doing with the above code is , defining properties for both the before and after psdo elements . and then with the below rule .

li.tab-current:before{
	right: 100%;
	width: 4000px;
}

overriding certain properties for the :before psedo element . now that code does't work , so what do i do , i have to ditch the cascading part of css and instead type the following :

li.tab-current:after{
	content: '';
	position: absolute;
	bottom: 0;
	left: 100%;
	height: 1px;
	width: 1000px;
	background:#BECBD2;
	z-index: 999;
}
 
li.tab-current:before{
	content: '';
	position: absolute;
	bottom: 0px;
	right: 100%;
	height: 1px;
	width: 1000px;
	background:#BECBD2;
	z-index: 999;
}

I have to repeat myself again for both the :before and :after elements , can somebody tell me WHY ?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 5 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi gautamz07, Have you tried

Hi gautamz07,
Have you tried something like:

li.tab-current:before,
li.tab-current:after{
	content: '';
	position: absolute;
display:block;

By default I think the content added is inline.