It’s because the pseudo-element isn’t generated if the content value is omitted (since the initial/default value is none). Specify a content value in order to generate the pseudo-element. A value of ” is sufficient. .product-show .readMore.less:after { content: ”; background: rgba(255, 255, 255, 0); display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: … Read more
CSS escape sequences only work within CSS strings. When you take a CSS escape sequence from an HTML attribute (i.e. outside of CSS), it will be read literally, not interpreted as part of a CSS string. If you want to encode the character within an HTML attribute, you need to encode it as an HTML … Read more
That applies border-box sizing to all elements as well as any :before and :after pseudo-elements that they may generate. The *:before, *:after portion means the respective pseudo-elements of any element. Once you create specific :before/:after rules later in your stylesheet, this declaration will apply automatically to all of those pseudo-elements, so you don’t have to … Read more
It’s neither a bug nor a mistake. The currently supported syntax (CSS2.1) for content is: content: normal | none | [ <string> | <uri> | <counter> | attr() | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit I.e.: The literal normal, none or inherit Or any number of these in succession: a string … Read more
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
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
Yes, the second argument to counter() defines the type of counter used, as for the list-style-type from a regular ul or ol; for example: content: counter(chapter, lower-alpha); ul { counter-reset: listStyle; } ul li { margin-left: 1em; counter-increment: listStyle; } ul li::before { margin-right: 1em; content: counter(listStyle, lower-alpha); } <ul> <li>one</li> <li>two</li> <li>three</li> </ul> JS … Read more
In CSS2.1, an element can only have at most one of any kind of pseudo-element at any time. (This means an element can have both a :before and an :after pseudo-element — it just cannot have more than one of each kind.) As a result, when you have multiple :before rules matching the same element, … Read more
Unfortunately, this is not possible. Per the spec: Generated content does not alter the document tree. In particular, it is not fed back to the document language processor (e.g., for reparsing). In other words, for string values this means the value is always treated literally. It is never interpreted as markup, regardless of the document … Read more
You have to use the escaped unicode : Like .breadcrumbs a:before { content: ‘\0000a0’; } More info on : http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/