CSS li:before statement deactivates html links in list item

The header of my script looks like this:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.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: "A5";
  font-size: x-large;
  color: #41845B;
  position: relative;
  left: -1.1em;
  top: 25px;
}

<!-- language: lang-html -->

<ul class="tickList">
  <li>Some text <a href="somelink">link text</a>. More text.</li>
</ul>

<!-- end snippet -->

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.

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: "A5";
  font-size: x-large;
  color: #41845B;
  position: relative;
  left: -1.1em;
  top: 25px;
  width: 50px;
}

something like that

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:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.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: "A5";
  font-size: x-large;
  color: #41845B;
  position: relative;
  left: -1.1em;
  top: 25px;
  pointer-events: none;
}

<!-- language: lang-html -->

<ul class="tickList">
  <li>Some text <a href="somelink">link text</a>. More text.</li>
</ul>

<!-- end snippet -->

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

The same result could have been achieved with less struggle:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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

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

.tickList li:before {
  content: "A5";
  font-size: x-large;
  color: #41845B;
  position: relative;
  top: .15em;
  padding-right: .2em;
}

<!-- language: lang-html -->

<ul class="tickList">
  <li>Some text <a href="somelink">link text</a>. More text.</li>
</ul>

<!-- end snippet -->