: Identify what CSS rule is adding arrows next to list elements I'm trying to identify the CSS that is generating the arrows next to the items in the "Recent Jobs" section of my site's homepage

@Holmes151

Try right-clicking (or command-click on a Mac) over the element with Firefox and selecting 'Inspect element' from the menu. This reveals that it is an unordered list with a background image styling the list on line 255 of style.css.

.widget ul li {
background: url(images/bullet.png) no-repeat 0 10px;
padding: 5px 0 8px 18px;
color: #262626 ;
}


There is also a style removing the list style (to be replaced with the background image) in frontend.css on line 1 - probably minified CSS all on one line.

.rp4wp-related-job_listing > ul li.job_listing a .meta li, .rp4wp-related-job_listing > ul li.no_job_listings_found a .meta li, ul.job_listings li.job_listing a .meta li, ul.job_listings li.no_job_listings_found a .meta li {
list-style: none outside;
display: block;
margin: 0;
}

Vote Up Vote Down

@Ogunnowo487

I assume you are referring to the smudge-like arrows in the bottom-left corners of the list-items, rather than the arrows between the list items.

Using Chrome's object inspector, there appears to be a background image that results in this (seemingly erroneous) "arrow". In styles.css?ver=4.7 on line #255 :

.widget ul li {
background: url(images/bullet.png) no-repeat 0 10px;
adding: 5px 0 8px 18px;
color: #262626 ;
}


After removing the background property, the arrows are removed:

Vote Up Vote Down

@Heady270

When looking for CSS rules that put things between, before, or after, it is important to look for :before and :after nodes and rules. Those are typically shown in the inspector inside the element.

Firefox's DOM inspector is able to find it. I just had to open the li node and there the ::after node containing the arrow is inside:


It appears to be caused by this rule in frontend.css:

.widget ul.job_listings li.job_listing ul.meta li:after{padding:0 0 0 .5em;content:"2023"}

Vote Up Vote Down