pseudo-element

I was trying to generate a screen in which utilises the :before and :after pseudo elements, but I'm wondering if such functionality is actually possible. I have a wrapper div which is wrapped around an input (allowing for pseudo element s on this wrapper). something like: +-----------------------------------+ | +-------------------------------+ | | | | | <-- wrapper div | +-------------------------------+ <-- input element +-----------------------------------+ However, I was looking to have a pseudo element positioned after the div. +-----------------------------------++-------+ | +-----------

Take a look at this jsfiddle: http://jsfiddle.net/ZNddz/ .intro:first-letter { font-size: 130px; } span.letter { background-color: red; font-size: 30px; } p { font-size: 80px; } The first rule consist of one class selector and one pseudo-element selector = 11 The second rule consist of one class selector .letter and one tag selector span = 11 Both rules have same specificity so it is reasonably to believe that the winner should be the last style. Obviously it is not the case. So I decided to add a background-color property to the second rule and as you can see it has a height of 30px. I deduce

Please see http://jsfiddle.net/ZWw3Z/ <p>Text text text text text text text...</p> p { background-color: blue; } p:before { content: ''; position: absolute; width: 10px; height: 100%; background-color: red; } Essentially, the height of the pseudo element is too big. I want it to have the same height as the p element. How can I do that? To future readers, the effect was to have a bar appear over text on the left-hand side. To accomplish this, the OP was using position: absolute; on the psuedo element ( p:before ). The error OP was encountering was because the psuedo-element was treating the

I am trying to add a ::before and ::after pseudo-element to a menu heading. The pseudo-elements work fine for a regular link outside of the menu. However, when I am trying to apply them to a menu item, the background property is set, but the ::before and ::after properties are not. Here is the relevant CSS: #cssmenu { background-color: #FFFFCC; clear: both; display: inline; float: left; list-style: none; overflow: hidden; text-align: center; text-transform: uppercase; width: 100%; } #cssmenu li { display: inline-block; } #cssmenu li a { display: inline-block; } #cssmenu li ul { /*margin-top:

Is it possible in my css file to do something like that?: .myclass:after{ content:"click me"; onclick:"my_function()"; } I want to add after all instances of myclass a clickable text, in the css style sheet. Is it possible in my css file to do something like [see code above]? No The important question to ask is why . HTML has control of the data within the webpage. Any CSS or JS is specified via the HTML. It's the Model . CSS has control of the styles , there is no link between CSS and HTML or JavaScript. It's the View . JavaScript has control of the interactions within the webpage, and has