Adding HTML entities using CSS content How do you use the CSS content property to add html entities? I have a number of links which I make into a breadcrumb style list by adding an arrow before each. <div class="breadcrumbs"> <a>One</a> <a>Two</a> <a>Three</a> </div> Which has the following style applied to it: .breadcrumbs a:before { content: '> '; } The problem is that when the breadcrumb list gets long and wraps to the next line, the arrow is left on the preceding line. The obvious

Placing Unicode character in CSS content value I have a problem. I have found the HTML code for the downwards arrow, &darr; (↓) Cool. Now I need to use it in CSS like so: nav a:hover {content:"&darr";} That obviously won't work since &darr; is an HTML symbol. There seems to be less info about these "escaped unicode" symbols that are used in css. There are other symbols like \2020 that I found but no arrows. What are the arrow codes? Solution : Why don't you just save/serve the CSS

Make body have 100% of the browser height I want to make body have 100% of the browser height. Can I do that using CSS? I tried setting height: 100%, but it doesn't work. I want to set a background color for a page to fill the entire browser window, but if the page has little content I get a ugly white bar at the bottom. Answer: Try setting the height of the html element to 100% as well. html, body { height: 100%; }

Make a div fill the height of the remaining screen space I am currently working on a web application, where I want the content to fill the height of the entire screen. The page has a header, which contains a logo, and account information. This could be an arbitrary height. I want the content div to fill the rest of the page to the bottom. I have a header div and a content div. At the moment I am using a table for the layout like

What is the best way to conditionally apply a class? Lets say you have an array that is rendered in a ul with an li for each element and a property on the controller called selectedIndex. What would be the best way to add a class to the li with the index selectedIndex in AngularJS? I am currently duplicating (by hand) the li code and adding the class to one of the li tags and using ng-show and ng-hide to show only one li per index. Solution : If you don't want to put CSS class names into Controller like I do,

How can I make the cursor a hand when a user hovers over a list item? I've got a list, and I have a click handler for its items: <ul> <li>foo</li> <li>goo</li> </ul> How can I change the mouse pointer into a hand pointer (like when hovering over a button)? Right now the pointer turns into a text selection pointer when I hover over the list items. Answer: Edit: In light of the passage of time, as people have mentioned, you can now safely

How can I transition height: 0; to height: auto; using CSS? I am trying to make a <ul> slide down using CSS transitions. The <ul> starts off at height: 0;. On hover, the height is set to height:auto;. However, this is causing it to simply appear, not transition, If I do it from height: 40px; to height: auto;, then it will slide up to height: 0;, and then suddenly jump to the correct height. How else could I do this without using JavaScript? #child0 { height: 0; overflow: hidden; background-color: #dedede; -moz-transition: height 1s ease;