Question 44949 in Html Question posted in
Some basic documentation can be found here.

CSS li:before statement deactivates html links in list item

The header of my script looks like this:

.tickList {
  margin: -0.5em 0.5em;
  list-style: none;
  list-style-position: outside;
}

.tickList li {
  padding-left: 25px;
  margin-bottom: -1.5em;
  margin-top: -1.5em;
  margin-left: -3.5em;
  text-align: left;
  position: relative;
  top: -20px;
}

.tickList li:before {
  display: block;
  content: "27A5";
  font-size: x-large;
  color: #41845B;
  position: relative;
  left: -1.1em;
  top: 25px;
}
<ul class="tickList">
  <li>Some text <a href="somelink">link text</a>. More text.</li>
</ul>

Now, if I look at my page in a browser, the link text is underlined and looks like a link, however, if I move my mouse over it, the cursor does not change and clicking on it has no effect. I did some testing and it turns out that if I remove the .ticklist li:before part from the style declarations (or just the display:block part actually), then the link works as expected. Why does this bit of CSS code break the link functionality?

Note that I am not including any outside js packages like jQuery or anything else.

Tags:

3

Answers


  1. 0

    The width of your :before element is actually 100% of the page, try defining a fixed width, and you’ll see the overlay won’t show anymore.

    .tickList li:before {
  display: block;
  content: "27A5";
  font-size: x-large;
  color: #41845B;
  position: relative;
  left: -1.1em;
  top: 25px;
  width: 50px;
}

    something like that

    Login or Signup to reply.
  2. 0

    There are a variety of ways to fix the issue, which is the inserted before element is sitting on top of the list item. Try adding pointer-events: none; to your before rules. This will prevent the before element from being the target of any pointer events, essentially passing it down through to the list item:

    .tickList {
  margin: -0.5em 0.5em;
  list-style: none;
  list-style-position: outside;
}

.tickList li {
  padding-left: 25px;
  margin-bottom: -1.5em;
  margin-top: -1.5em;
  margin-left: -3.5em;
  text-align: left;
  position: relative;
  top: -20px;
}

.tickList li:before {
  display: block;
  content: "27A5";
  font-size: x-large;
  color: #41845B;
  position: relative;
  left: -1.1em;
  top: 25px;
  pointer-events: none;
}
    <ul class="tickList">
  <li>Some text <a href="somelink">link text</a>. More text.</li>
</ul>

    Alternately you could also set the z-index of the before element to -1 which effectively moves it behind the page.

    Login or Signup to reply.
  3. 0

    The same result could have been achieved with less struggle:

    .tickList {
  list-style: none;
  list-style-position: outside;
  padding: 0;
  margin: 0;
}

.tickList li {
  padding-left: 1em;
  text-align: left;
}

.tickList li:before {
  content: "27A5";
  font-size: x-large;
  color: #41845B;
  position: relative;
  top: .15em;
  padding-right: .2em;
}
    <ul class="tickList">
  <li>Some text <a href="somelink">link text</a>. More text.</li>
</ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search