Elements to 'look like' a bullet point list inside an anchor link

Question

I am creating an element on my page like so:

<a href="">
<span class="benefits">
Free entry<br />
20% off in store<br />
First to know about latest courses
</span>
</a>

The client wants the whole area clickable, and the list of benefits to display with bullet points.

As far as i am aware lists cannot be placed inside anchor tags?

I had hoped I could insert a tag before hand that I could attach the css list-style-type rules to however that didn't work. I tried then making that element a fixed width and height with a background colour, however, it didnt display properly in IE6 - which I have to support.

Any ideas?

Answer 1

Try using the HTML character entity • which looks like this: •

<a href="">
<span class="benefits">
&bull; Free entry<br />
&bull; 20% off in store<br />
&bull; First to know about latest courses
</span>
</a>

more character entities here: http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references

Answer 2

Maybe something like this could help:

a.error::before{    
    background-color: #be1c1c;
    border-radius: 1em;
    content: " ";
    display: inline-block;
    height: 0.35em;
    margin-right: 6px;
    width: 0.35em;
}
a.error{
    color:#be1c1c;
    text-decoration:none;
    display:block;
}
ul {
    padding:1em;
    display: block;
    list-style-type: disc;
}
ul li{
    color:#be1c1c;
}

My links:
<a class="error" href="#"> item 1</a>
<a class="error" href="#"> item 2</a>
<a class="error" href="#"> item 3</a>
<br>
My list:
<ul>
  <li> item 1</li>
  <li> item 2</li>
  <li> item 3</li>
</ul>

Hope it help!