[The spec says][1]...

&gt; Note. This specification does not fully define the interaction of `::before` and `::after` with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

I guess this means they don&#39;t work with `img` elements (for now).

Also see [this answer][2].


  [1]: http://www.w3.org/TR/CSS2/generate.html#before-after-content
  [2]: https://stackoverflow.com/questions/6949148/css-after-not-adding-content-to-certain-elements/6949190#6949190

It could be that browser vendors have not implemented pseudo elements on the `img` tag because of their interpretation of the spec: the `img` element, strictly speaking, is not a block level element or an inline element, it is an [empty element][1].


  [1]: http://www.w3.org/MarkUp/html3/img.html

Just for testing and knowing it&#39;s not pretty you can do the following to make the pseudo elements work with &#39;img&#39; elements. 

Add: `display: block; content: &quot;&quot;; height: (height of image)px`
to the img element in your CSS.

Though it will render your img tag empty cause of the `content: &quot;&quot;` you can then

Add: `style=&quot;background-image: url(image.jpg)&quot;` 
to your img element in html.

Tested this in Fx, Chrome and Safari

The question is a bit theoretical, what is the cost of creating JAXB context, marshaller and unmarshaller?

I&#39;ve found that my code could benefit from keeping the same JAXB context and possibly the same marshaller for all marshaling operations rather than creating context and marshaller on each marshaling.

So what is the cost of creating JAXB context and marshaller/unmarshaller? Is it okay to create context+marshaller for each marshaling operation or it&#39;s better to avoid it?


JAXB creating context and marshallers cost

I&#39;ve just discovered Sass, and I&#39;ve been so excited about it. 

In my website I implement a tree-like navigation menu, styled using the [_child combinator_](https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator) (`E &gt; F`). 

Is there any way to _rewrite_ this code with a simpler (or better) syntax in Sass?

    #foo &gt; ul &gt; li &gt; ul &gt; li &gt; a {
      color: red;
    }

Sass and combined child selector

I am trying to use a [`:before` pseudo element][1] with an `img` element.

Consider this HTML and CSS...

### HTML
    &lt;img src=&quot;http://0.gravatar.com/avatar/this-is-not-a-hash&quot; alt=&quot;&quot; /&gt;

### CSS

    img:before {
      content: &quot;hello&quot;;
    }

[jsFiddle][2].

This does not produce the desired effect (tested in Chrome 13 and Firefox 6). However, it works with a `div` or `span` element.

Why not?

Is there a way to make pseudo elements work with `img` elements?


  [1]: http://www.w3.org/TR/CSS2/generate.html#before-after-content
  [2]: http://jsfiddle.net/LPt7m/

Why don&#39;t :before and :after pseudo elements work with `img` elements?

I am trying to use a <a href="http://www.w3.org/TR/CSS2/generate.html#before-after-content" target="_blank" rel="noopener noreferrer"><code>:before</code> pseudo element</a> with an <code>img</code> element.
Consider this HTML and CSS...
<h5 id="html"><a aria-hidden="true" tabindex="-1" href="#html"></a>HTML</h5>
<pre><code class="hljs language-ini">&#x3C;img src="http://0.gravatar.com/avatar/this-is-not-a-hash" alt="" />
</code></pre>
<h5 id="css"><a aria-hidden="true" tabindex="-1" href="#css"></a>CSS</h5>
<pre><code class="hljs language-css">img:before {
 content: "hello";
}
</code></pre>
<a href="http://jsfiddle.net/LPt7m/" target="_blank" rel="noopener noreferrer">jsFiddle</a>.
This does not produce the desired effect (tested in Chrome 13 and Firefox 6). However, it works with a <code>div</code> or <code>span</code> element.
Why not?
Is there a way to make pseudo elements work with <code>img</code> elements?

I have an IFRAME with overflows hidden in the css and html. It works in Firefox, but not Chrome/Safari

Why is this?

overflow: hidden; doesn&#39;t work on Chrome with IFRAMEs?

My intention is to create a menu at the top of the page which remains at the top of the page even when the user scrolls (like Gmail&#39;s recent feature which has the commonly-used buttons scrolling down with the user so that it allows them to perform operations on messages without having to scroll to the top of the page).

I would also like to set the content below said menu to appear below it - at present, it appears behind it.

I am aiming for something like this:

    +________________________+
    |          MENU          | &lt;--- Fixed menu - stays at top even when scrolling.
    +&#172;&#172;&#172;&#172;&#172;&#172;&#172;&#172;&#172;&#172;&#172;&#172;&#172;&#172;&#172;&#172;&#172;&#172;&#172;&#172;&#172;&#172;&#172;&#172;+
    |     CONTENT BEGINS     |
    |          HERE          |
    |                        |
    |                        |
    |                        |
    |                        |
    |                        |
    |                        |
    +&#172;&#172;&#172;&#172;&#172;&#172;&#172;&#172;&#172;&#172;&#172;&#172;&#172;&#172;&#172;&#172;&#172;&#172;&#172;&#172;&#172;&#172;&#172;&#172;+   &lt;--- Bottom of page.

I hope to have the menu at the top which never moves and which stays at the top of the page, even when the user scrolls down.  I am also looking to have the main content begin beneath the menu when the user is at the top of the page, but when the user scrolls down, then it doesn&#39;t matter if the menu goes over the top of the content.

Summary:

- I wish to have a fixed position menu at the top of the page which follows the user when scrolling.
- Content must appear BELOW the menu ONLY when the user is at the top of the page.
  - When the user scrolls down, the menu may overlap the content.

Can somebody please explain how to achieve this?

Thank you.


**UPDATE:**

CSS Code:

    #floatingMenu{
	clear: both;
	position: fixed;
	width: 85%;
	background-color: #78AB46;
	top: 5px;
    }


HTML Code:

    &lt;div id=&quot;floatingMenu&quot;&gt;
        &lt;a href=&quot;http://www.google.com&quot;&gt;Test 1&lt;/a&gt;
        &lt;a href=&quot;http://www.google.com&quot;&gt;Test 2&lt;/a&gt;
        &lt;a href=&quot;http://www.google.com&quot;&gt;Test 3&lt;/a&gt;
    &lt;/div&gt;	

At present, I can get the menu to appear at the top of the page and centered by placing it inside my `container` `div`.  However, the content goes behind the menu.  I have set `clear: both;` and this has not helped.

How can I make content appear beneath a fixed DIV element?

One of the columns in my table can contain a long text without whitespaces. How can I limit its width to, say, 150px? I don&#39;t want it to be 150px always (if it&#39;s empty it should be narrow), but if there is a long text I want it to be limited with 150px and the text to be wrapped.

Here is a test example: http://jsfiddle.net/Kh378/ (let&#39;s limit the 3rd column).

Thank you in advance.

**Update:**  
Setting this styles:

    word-wrap: break-word;
    max-width: 150px;
does not work in IE8 (tested on different computers) and I suppose it does not work in any version of IE.

How can I limit table column width?

Given a transparent PNG displaying a simple shape in white, is it possible to somehow change the color of this through CSS? Some kind of overlay or what not?


Change color of PNG image via CSS?

After researching this issue for a couple of hours, I found that one of the most efficient ways to toggle a page element&#39;s display (in HTML) is to do something like:

    // showing
    document.getElementById(&#39;element&#39;).style.display = &#39;&#39;;
    
    // hiding
    document.getElementById(&#39;element&#39;).style.display = &#39;none&#39;;
    

**Simple question:** What does `style.display = &#39;&#39;` actually do?

Does it &quot;reset&quot; the original display property?

Or does it remove the display property, thereby using the default style for display?

..........................................

**Would be nice to know:** Does anyone know of any links to any kind of documentation about this? 

(Yes, I have Google-d this issue, but I&#39;m probably not entering the right search term and keep coming up with completely un-related search results.)



Thanks for any suggestions or links.

What does style.display = &#39;&#39; actually do?

I am new to pseudo-elements that are prefixed with a double colon. I came across a blog article discussing styling of scrollbars using some webkit only css. Can the pseudo-element CSS be applied to individual elements?

    /* This works by applying style to all scroll bars in window */
    ::-webkit-scrollbar {
        width: 12px;
    }

    /* This does not apply the scrollbar to anything */
    div ::-webkit-scrollbar {
        width: 12px;
    }

In this fiddle, I would like to make the div&#39;s scrollbar customized, but the main window&#39;s scrollbar stay at the default.

http://jsfiddle.net/mrtsherman/4xMUB/1/





Apply webkit scrollbar style to specified element

**SOLVED** - used `\00a9` instead of `&amp;copy;`

Pretty self-explanatory:

    body:after {
    	content: &quot;&amp;copy; me&quot;;
        /* other formatting */
    }

In HTML, the `&amp;copy;` sequence inserts a copyright character. Can this be done in CSS Pseudo-Elements like I&#39;m trying to do here?

Copyright Symbol in CSS :after Pseudo-Element

Things like `a:link` or `div::after`...

Information on the difference seems scarce.

What is the difference between a pseudo-class and a pseudo-element in CSS?

so I&#39;ve been toying with this calendar-ish thingy for a bit:

- Grid of divs (mimicking a table)
- Hovering over a table cell displays a tooltip with 2 icons each consisting of a div with :before and :after elements
- Icons change colour depending on colour of cell hovered and that of its previous sibling (cell&#39;s colour class is applied to the icon).

Stripped down fiddle: http://jsfiddle.net/e9PkA/1/

This works fine in every browser but IE8 and below (IE lte 7 and I will never friends, but IE8 would be nice to have).

IE8 notices the change of classNames and updates the divs&#39; colour accordingly but completely ignores the colour changes implied by the :before and :after declarations, e.g.:


    .wbscal_icon_arrival:before {
        width: 12px;
        height: 4px;
        
        left: -8px;
        top: 6px;
        background-color: silver;
    }
    
    .wbscal_icon_arrival.wbscal_full:before {
        background-color: #ff0000 !important; 
    }

In the fiddle above, the :before/:after elements are coloured exactly once: the first time the tooltip is shown. 

In another version it would update everytime I&#39;d move the mouse out of the &quot;table&quot; div, but not if the tooltip is hidden when hovering a &quot;cell&quot; div border.

I&#39;ve tried force-triggering repaints by adding/removing other classes to/from the element/its parents/the body, editing/accessing style attributes and whatnot so I guess it&#39;s not your average repaint problem.

Is there a JS hack that fixes this and forces :before/:after to update?

Forcing IE8 to rerender/repaint :before/:after pseudo elements

I have a set of styled links using the `:before` to apply an arrow.

It looks good in all browser, but when I apply the underline to the link, I don&#39;t want to have underline on the `:before` part (the arrow).

See jsfiddle for example: http://jsfiddle.net/r42e5/1/

Is it possible to remove this? The test-style I sat with `#test p a:hover:before` does get applied (according to Firebug), but the underline is still there.

Any way to avoid this?

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    #test {
      color: #B2B2B2;
    }

    #test p a {
      color: #B2B2B2;
      text-decoration: none;
    }

    #test p a:hover {
      text-decoration: underline;
    }

    #test p a:before {
      color: #B2B2B2;
      content: &quot;► &quot;;
      text-decoration: none;
    }

    #test p a:hover:before {
      text-decoration: none;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;test&quot;&gt;
      &lt;p&gt;&lt;a href=&quot;#&quot;&gt;A link&lt;/a&gt;&lt;/p&gt;
      &lt;p&gt;&lt;a href=&quot;#&quot;&gt;Another link&lt;/a&gt;&lt;/p&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;



How to remove only underline from a:before?

Is it possible to have multiple `:before` pseudos for the same element?

    .circle:before {
        content: &quot;\25CF&quot;;
        font-size: 19px;
    }
    .now:before{
        content: &quot;Now&quot;;
        font-size: 19px;
        color: black;
    }

I am trying to apply the above styles to the same element using jQuery, but only the most recent one is applied, never both of them.

Can I have multiple :before pseudo-elements for the same element?

None of the following code works : 

    p:before { content: &quot; &quot;; }
    p:before { content: &quot;&amp;nbsp;&quot;; }

**How do I add white space before element&#39;s content ?**

Note: I need to color the border-left and the margin-left for semantic use and use the space as colorless margin. :)

CSS: how to add white space before element&#39;s content?

I am wondering why the browser shows double open quotes only for the first element. The second element has single quotes instead.

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    a::before {
      content: open-quote;
    }

&lt;!-- language: lang-html --&gt;

    &lt;a href=&quot;http://www.google.com&quot;&gt;Google&lt;/a&gt; &lt;br&gt;
    &lt;a href=&quot;http://www.amazon.com&quot;&gt;Amazon&lt;/a&gt;

&lt;!-- end snippet --&gt;



Content Type	Original Author	Original Content on Stackoverflow
Question	alex	View Question on Stackoverflow
Solution 1 - Css	alex	View Answer on Stackoverflow
Solution 2 - Css	Joel Glovier	View Answer on Stackoverflow
Solution 3 - Css	Ferdi Emmen	View Answer on Stackoverflow

Why don't :before and :after pseudo elements work with `img` elements?

Css Problem Overview

HTML

CSS

Css Solutions

Solution 1 - Css

Solution 2 - Css

Solution 3 - Css

Sass and combined child selector

JAXB creating context and marshallers cost

Attributions