CSS relative element prevents floating


div {
  width: 500px;

ul {
  list-style-type: none;
  line-height: 1.25em;

ul > li {
   position: relative;

ul > li:before {
  content: "\2022";
  position: absolute;
  font-weight: bold;
  font-size: 30px;
  line-height: inherit;
  left: -0.75em;
<span style="float:right"><a href="http://google.com">Test link</a><br/>
<a href="http://google.com">Test link</a><br/>
<a href="http://google.com">Test link</a><br/>
<a href="http://google.com">Test link</a><br/>
<a href="http://google.com">Test link</a></span>
<li>The <a href="http://google.com">glowing steel</a> is extremely hot and will harm anyone that touches it. Jumping into the slag bucket is an instant death, regardless of [[Damage Threshold]].</li>
<li>The ''"Lucky 38 Executive Override"'' option on the terminal on the second level was originally supposed to be part of the quest [[The Moon Comes Over the Tower]], but that section was cut. See that quest notes section for details.</li>
<li>The three Mr. Steels found inside, as well as the fiends, respawn every three game days.</li>

Run codeHide result

In the example above, the links are not available. Is this the intended behavior of CSS? Are there any correct fixes?

So far I have come up with a few inferior solutions:

  • Make all elements float position:relative

    and z-index:1

    : Obviously this is not a good general solution.
  • Overflow:hidden

    in item ul

    : links are available, but list items no longer wrap around floats.
  • Overflow:hidden

    in item li

    : links are available, list items are wrapped around floats. But the content :before

    becomes invisible.
  • z-index: -1

    to li

    : links in floats become available in exchange links in a list becoming unavailable.

And, after some further thought, I ended up providing all the :link

elements position:relative

and z-index:1

. Not perfect, but I think this is the one with the least flaws.


source to share

1 answer

Can you wrap all your links in a div and set this wrapper with this style:



Like in this fiddle .


Another possible solution might be to set z-index

yours <li>

to something below 0. Like this:

ul > li {
   position: relative;


Here is a fiddle .


Here's another possible solution that involves setting up a negative margin and using a transform for your content :before

. This is a bit of a hack, but I might work for your situation.

Add these styles:

ul > li:before {


And remove this style:

ul > li {


Here is a fiddle .



All Articles