Mobile app version of vmapp.org
Login or Join
Speyer207

: 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

@Speyer207

Posted in: #Css #Html #Plugin #Wordpress

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 (scroll down, sidebar on right). The code is being generated by a plugin, and I need to identify the CSS generating the arrows, so that I can change (override) it. I've tried using Chrome's DOM Inspector, but no joy. Any help would be appreciated.

10.03% popularity Vote Up Vote Down


Login to follow query

More posts by @Speyer207

3 Comments

Sorted by latest first Latest Oldest Best

 

@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;
}

10% popularity 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:

10% popularity 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"}

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme