pseudo-element

I have the following content in my h1 tag: "(Hello World)" so I add the following to my css to change the first character of this element: h1:first-letter { font-size:63px; color:#510007; font-family:Helvetica; } But, as I noticed, first-letter is only for letters, so is there any workarounds to apply this style to the first char? Which in this case is "(". From the spec : Punctuation (i.e, characters defined in Unicode [UNICODE] in the "open" (Ps), "close" (Pe), "initial" (Pi). "final" (Pf) and "other" (Po) punctuation classes), that precedes or follows the first letter should be included So

If I have markup: <div class="a b"></div> where the .a class has a hover class associated with it and the .b class has a pseudo element associated with it... like so: div { width: 100px; height: 100px; } .a { background: red; display: inline-block; } .a:hover { background: green; } .b:after { content: ''; display: inline-block; width: 100px; height: 100px; margin-left: 100px; background: pink; } Is it possible with css to prevent a pseudo element from triggering the .a class hover? FIDDLE tessi The following css does the trick for modern browsers (not IE10-) : .b:after { pointer-events: none;

Why does the CSS3 pseudo-element selection not change all parts of the highlight? As you can see in this screenshot I have selected part of the page, and parts of the selection are the default bright blue color: This is the CSS that I'm using, it is at the top of my CSS file: ::selection { background: #3B3B3B; color: #fff; } ::-moz-selection { background: #3B3B3B; color: #fff; } It seems like the highlight for inputs (text, checkboxes, etc.) and white space does not change. Does anyone know why this is, and is there a way to change it for every part of the page so the highlight color is

I'm particularly interested in understanding when the ::before and ::after pseudo-elements can be applied to self-closing tags. This is the definition of these pseudo-elements, according to the W3 Generated Content CSS Specifications : 12.1 The :before and :after pseudo-elements : Authors specify the style and location of generated content with the :before and :after pseudo-elements. As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content. The 'content' property, in conjunction with these pseudo

I need to get :after and assign it to variable. It is possible? querySelectorAll doesn't work. alert(some_div_with_pseudo.querySelectorAll('::after')[0]) // undefined The short answer is that you can’t. It’s not there yet. JavaScript has access to the DOM, which is built when the page is loaded from HTML, and modified further when JavaScript manipulates it. A pseudo element is generated by CSS, rather than HTML or JavaScript. It is there purely to give CSS something to hang on to, but it all happens without JavaScript having any idea. This is how it should be. In the overall scheme of things,

I have three divs inside a parent div that are being spaced out using: display: flex; justify-content: space-between; However, the parent div has an :after on it which is making the three divs not go out to the edge of parent div. Is there a way to have flexbox ignore the :before and :after ? codepen.io .container { width: 100%; display: flex; justify-content: space-between; padding-top: 50px; background: gray; } .container div { background: red; height: 245px; width: 300px; } .container:before { content: ''; display: table; } .container:after { clear: both; content: ''; display: table; } <div

I have a div element with a CSS pseudo-element ::before used as a close button (instead of using an actual button). How do I apply an event listener to only the pseudo-element? HTML <div id="box"></div> CSS #box:before { background-image: url(close.png); content: ''; display: block; height: 20px; position: absolute; top: -10px; right: -10px; width: 20px; } #box { height: 100px; width: 100px; } Quentin No. The pseudo-element does not exist in the DOM so it has no HTMLElementNode object representing it. Was looking for a solution and found this thread. Now want to share my solution: CSS element

I want to append a <br /> to a particular class. Using the :after pseudo class simply displays <br /> as text. Is there a way to make this work? It's internal for IE8 so browser issues aren't a problem. If I do <span class="linebreakclass">cats are</span> brilliant I want "brilliant" to appear on a new line. You won't be able to render HTML tags but you can set style like this: .needs-space:after { content: " "; display: block; clear: both; /* if you need to break floating elements */ } The main setting here is display: block; This will render :after content inside a DIV . And this pseudo