Steps to create a clickable background element for an AFTER li:

How can I make the background arrow clickable in my list, just like the link?

.listacategorias  li:after {
  float:right;
  content: "";
  display: block;
  background: url("//d26lpennugtm8s.cloudfront.net/stores/567/260/rte/setaazul.png") 
  no-repeat;
  width: 8px;
  height: 12px;
  margin-top:8px;
  margin-right:10px;
}
<ul class="listacategorias">
  <li><a href="https://www.playgorila.com/ps3/">Ver tudo de Ps3</a></li>
  <li><a href="https://www.playgorila.com/ps3/ate-29-90/">Jogos at&eacute;R$29,90</a></li>
  <li><a href="https://www.playgorila.com/ps3/acessorios/">Acess&oacute;rios econtroles</a></li>
  <li><a href="https://www.playgorila.com/ps3/consoles/">Consoles</a></li>
  <li><a href="https://www.playgorila.com/ps3/acao/">Jogos dea&ccedil;&atilde;o</a></li>
  <li><a href="http://www.playgorila.com/ps3/esporte/">Jogos de esporte</a></li>
</ul>

htmlcss

Answer №1

Here is a possible solution:

.listacategorias li a:after { /*...*/ }

It seems like you were trying to add an arrow to the <li> tag instead of the <a> tag, which may have caused the click event to be triggered on the <li> element. Unfortunately, pseudo elements like :after are typically not clickable.

I hope this information was helpful :)

If the previous solution does not work, consider using an image as a background with the appropriate background-position.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The issue with Jquery .html() function causing spaces to disappear between words

When utilizing jQuery's .html() property to populate a select box, I encountered an issue where the spaces between words were being trimmed down to just one space. Despite including multiple spaces in the option, it would always resolve to a single sp ...

javascripthtmljquery

Position the table at the bottom of the page using CSS

I'm experiencing an issue where my HTML is not rendering correctly. I need to move the table with the ID "footer" to the bottom of the page. Here's the structure of the situation: <div id="container"> <table id="footer"></tabl ...

htmlcss

Conceal the unstyled element and reveal its adjacent sibling?

I have come across some HTML code that I am unable to modify. Instead of using JS/jQuery, I prefer a solution with cross-browser compatible CSS. The structure of the HTML is as follows: <ul class="list"> <li class="item"> <a hr ...

htmlcsshtml-lists

Excessive letter spacing in font-face causing display issues on Apple devices such as iPhone and iPad

Recently, I designed a website using some unique fonts that aren't supported on all devices. To ensure compatibility across various platforms, I converted the fonts to all major file formats, including SVG for iPhones and iPads. Surprisingly, this sol ...

iphonehtmlcssipadfont-face

What is the best way to organize images of varying dimensions that are provided by the user all within the same card layout

Users have posted images from the database, but the issue arises when the images have different dimensions within the card. https://i.sstatic.net/ktGqL.png If we set fixed height and width, the image loses its original ratio. https://i.sstatic.net/ao91a ...

cssbootstrap-4django-templates

Styling a table based on specific conditions using Angular and JavaScript

I am trying to conditionally style the text in the table based on the time elapsed since the last ping. Specifically, I want to change the color of the text from green to red once 5 minutes have passed and vice versa. <form name="myform" data-ng-submit ...

javascripthtmlcssjsonangularjs

Using the Javascript function getElementById to retrieve user input for passing a RSS FeedURL

I've been working on creating a basic form where users can input a Feed URL and see the contents displayed on the HTML page. For testing purposes, I have used "https://jquery-plugins.net/rss" as the feedUrl, and it has been functioning normally. This ...

javascripthtmljquery

Issue with Bootstrap 4 columns overlapping upon screen resizing

Whenever I use a row with 4 columns within a container that has 3 columns, the text file overlaps with the column containing an image when the screen size is reduced or viewed on an iPhone. Take a look at the code snippet and screen capture provided below ...

htmlcsstwitter-bootstrapbootstrap-4

Adjusting the Height of Highcharts Funnel Segments to a Specific Measurement

My current funnel setup looks like this: $(function () { var dataEx = [ ['1 Visit', 352000], ['2 Visits', 88000], ['3+ Visits', 42000] ], l ...

javascriptjqueryhtmlcsshighcharts

How to Conceal an Element in AngularJS When the Element is Absent

I am currently working on ACTIVITI and require assistance with hiding a specific button: https://i.sstatic.net/3oKrk.png If there are no processes instantiated, the server will return this (displaying the button): https://i.sstatic.net/FI66R.png Otherw ...

javascriptjqueryhtmlangularjsforms

Showing tags with varying sizes

https://i.sstatic.net/oo3MP.png Is there a better way to organize and display my content? I have an array of elements that I want to display like the example above. I attempted using lists, but it didn't work out as expected. Here's what I&apo ...

htmlcsstwitter-bootstrap-3

Customize cursor using CSS

I have a div with overflow: hidden that I am making scrollable by allowing the user to click and drag the background. There are links and buttons within this space. Here is the CSS I am using for this: #div-grabscroll { cursor: url(../img/op ...

javascriptcsshtmlcursor

Is it possible to amalgamate CSS declarations together?

You have the ability to combine CSS selectors by using a comma, like in this example: .one, .two { color: #F00; } <div class="one">One</div> <div class="two">Two</div> Using this method produces the same outcome as specifying ...

csssass

Automatically press a button that appears on the webpage

I am looking to automate the clicking of a button that appears on a website. How can I accomplish this using Python? I have no experience in JavaScript and am fairly new to programming. Here is the outer HTML code for the button: <button type="button" ...

javascriptpythonhtmlautomationwebautomation

Issue with loading contentsCss in CKEDITOR with VUEJS2

Currently in the process of developing a website using Vue.js 2, we incorporated the ckeditor4-vue plugin some time ago. An issue has recently come up regarding the font not matching the rest of the application. The preference is to default to 'Lato& ...

javascriptcssvue.jsckeditor

What is the best way to extract data from an HTML tag and store it in a PHP variable

Here's my question: I currently have a value within `<p>` tags. For example, `<p>Hello</p>` My goal is to find a way to extract the content inside the `<p>` tags and store it in a PHP variable named $getPara. This variable ...

phpjqueryhtml

Unable to get `tr:nth-child` to function properly within an MVC view

I have come across many questions regarding my issue, but none seem to offer a solution that works for me. The problem lies with the styling in the upper section of my view (which I plan to transfer to bootstrap later on). My main objective is to implement ...

cssasp.net-mvcrazor

PHP code: Output an empty <td> element for each iteration in a foreach loop

I have two arrays: $arrInfoComment; The first array contains the ID of the users who have commented along with their comments. (For example: 2 comments) $arrInfoExpert; The second array contains the IDs of users. (3 users) I am using a foreach loop to ...

phphtmlarrays

How to reduce the text input field size in Django Bootstrap for a sleeker design

I have a form with various elements like textfields, radio buttons, and text areas. The textfield size is currently too small and does not look good: https://i.sstatic.net/ghimd.png I'm wondering how I can make the textfields slightly larger and why ...

htmlcssdjangotwitter-bootstrap

The right column in Bootstrap is covering up the left column

Does anyone know why I am encountering an issue with my bootstrap navigation bar? When I try to have two columns in the navigation bar and resize the viewport, the right column overlaps the left one. This issue seems to be happening when the viewport size ...

htmlcsstwitter-bootstrap