You’re not crazy: it is indeed not possible to change the dimensions of an image that is inserted using content, whether it’s inserted with url(), image(), image-set(), element(), or a CSS gradient. The image is always rendered as is. This is known as replaced content, or a replaced element (except we’re not talking about elements … Read more
You can achieve what you need with CSS variables. In your style sheet you can set the background image like this: .featured-image:after { content: ”; background-image: var(–featured-image); } After that you can programmatically set this variable on the same element or higher up in the DOM tree: <div class=”featured-image” [ngStyle]=”{‘–featured-image’: featuredImage}”> More about CSS variables … Read more
For what it’s worth, Selectors 4 now explicitly instructs1 authors to use double colons for all pseudo-elements, including CSS1 and CSS2 pseudo-elements, going forward (emphasis mine): Because CSS Level 1 and CSS Level 2 conflated pseudo-elements and pseudo-classes by sharing a single-colon syntax for both, user agents must also accept the previous one-colon notation for … Read more
As you can read here http://www.w3.org/TR/CSS21/generate.html, :after only works on elements that have a (document tree) content. <input> has no content, as well as <img> or <br>.
Pseudo Elements A CSS pseudo-element is used to style specified parts of an element. It can be used to: Style the first letter, or line, of an element Insert content before, or after, the content of an element ::after ::after is a pseudo element which allows you to insert content onto a page from CSS … Read more
Inline elements can’t be transformed, and pseudo elements are inline by default, so you must apply display: block or display: inline-block to transform them: #whatever:after { content: “\24B6″; display: inline-block; transform: rotate(30deg); } <div id=”whatever”>Some text </div>
If you use display: inline-block on the :after pseudo, the text-decoration declaration will work. Tested in Chrome 25, Firefox 19
Here is how this can work. You need to modify your data attribute as follows: [data-foo]:after { content: attr(data-foo); background-color: black; color: white; white-space: pre; display: inline-block; } <div data-foo=’First line 
 Second Line’>foo</div> Fiddle Demo: http://jsfiddle.net/audetwebdesign/cp4RF/ How It Works Using \a does not work, but the equivalent HTML entity does, 
. According to the … Read more
The :before and :after will not work on a text-area (nor any element that cannot contain another element, such as img or input), because the generated content of the pseudo-element gets placed within the element but before or after that element’s content, and acts itself as an element. The pseudo-element does not get placed before … Read more
The idea of nesting ::before and ::after pseudo-elements has been proposed; see this section of the Generated and Replaced Content module. However, that module has been abandoned pending a complete rewrite, so I wouldn’t hold my breath on this document ever receiving implementation until it’s republished. And even then, whether nesting content pseudo-elements will still … Read more