Previous Message
Next Message

Can I style generated content?

Sent by Jono on 23 September 2005 17:05

> On 23/09/05, [EMAIL-REMOVED] wrote:
>> Is it possible to style generated text?
>> a.left-arrow:before {
>>    content: "< ";
>       color: blue;
>>    }

OK, I must have missed a typo earlier, I couldn't get that working, but it
is indeed making the generate "< " the color I want.

I also encountered a problem with the generated content on hover.  I tried
to remove the "< " on hover, but I am seeing all of the other links flash
when I hovered over the link with the generarted content.

I cannot seem to figure out how to remove the "< " on hover without making
the rest of the links in my nav flash in Firefox?  Here's what I am using:

html>body #sidebar-nav li.selected a:before {
	content: "< ";
html>body #sidebar-nav li.selected a:hover:before {
	content: ""; /*gets rid of < */
The above works - the "< " goes away on hover - but at the same time all
of the other links in the navigation now flash when I hover over the link
with the generated content?  It appears that the other link's background
images and text color are switching to white for a split second?

Why would hovering over a link with generated content cause a flash?
Below is my HTML and CSS; I cannot currently post a link:

<!-- START: sidebar navigation -->
  <div id="sidebar-nav">
    <ul id="navlist">
      <li><a href="page1.html">Page 1</a></li>
      <li class="selected"><a href="page2.html">Page 2</a></li>
      <li><a href="page3.html">Page 3</a></li>
      <li class="exit"><a href="Page 4">Page 4</a></li>
<!-- END: sidebar navigation -->

/* -- sidebar navigation CSS -- */

#sidebar-nav {
	padding: 0;
	margin: 0 0 1em 1px;
	background-color: #e0efff;
	color: #035ca0;
	font-weight: bold;
#sidebar-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
#sidebar-nav li {
	margin: 0;
	display: inline;
#sidebar-nav li a {
	display: block;
	padding: 5px;
	background: #d9e9fa url(nav_bg.gif) repeat-x bottom left;
	color: #035ca0;
	text-decoration: none;
	border-bottom: 1px solid #90bade;
#sidebar-nav li.selected a {
	background-color: #035ca0;
	background-image: none;
	color: #fff;
* html #sidebar-nav li a,
* html #sidebar-nav li.selected a {
	height: 0.1em;
#sidebar-nav li a:hover,
#sidebar-nav li.selected a:hover {
	background: #9ec6ef url(nav_bg_hover.gif) repeat-x bottom left;
	color: #fff;
#sidebar-nav li.selected a:before {
	content: "< ";
#sidebar-nav li.selected a:hover:before {
	content: ""; /* removing this stosp the flashing? */
#sidebar-nav li.exit a:hover {
	background: #9ec6ef url(nav_bgexit.gif) no-repeat bottom right;
	color: #02954f;

Is this a known firefox bug?
css-discuss [EMAIL-REMOVED]]
List wiki/FAQ --
Supported by --
Previous Message
Next Message

Message thread: