Not directly answering the question asked, but hopefully useful to some people who found this question from a search like I did!
Using roughly the same idea as other answers, but with a simpler ::before pseudo-element, you can use any unicode arrow character for your bullet rather than messing about with borders on divs:
ul {
position: relative;
list-style: none;
}
li::before {
content: '';
position: absolute;
left: 0;
}
Here is a list of unicode arrows, so you can find something that you like: http://xahlee.info/comp/unicode_arrows.html
Answer from Jamie Humphries on Stack OverflowVideos
Not directly answering the question asked, but hopefully useful to some people who found this question from a search like I did!
Using roughly the same idea as other answers, but with a simpler ::before pseudo-element, you can use any unicode arrow character for your bullet rather than messing about with borders on divs:
ul {
position: relative;
list-style: none;
}
li::before {
content: '';
position: absolute;
left: 0;
}
Here is a list of unicode arrows, so you can find something that you like: http://xahlee.info/comp/unicode_arrows.html
Use content: '' with pseudo elements (:before or :after). And use list-style: none for ul to remove the bullets. Like:
ul {
list-style: none;
}
ul li:before{
content: '';
position: absolute;
border-right:2px solid black;
border-bottom:2px solid black;
width:10px;
height:10px;
top: calc(50% - 4px);
left: -20px;
transform: translateY(-50%) rotate(-45deg);
}
Have a look at the snippet below:
#arrow {
border-right:2px solid black;
border-bottom:2px solid black;
width:10px;
height:10px;
transform: rotate(-45deg);
margin-top:40px;
}
ul li {
position: relative;
padding-bottom: 10px;
}
ul {
list-style: none;
}
ul li:before{
content: '';
position: absolute;
border-right:2px solid black;
border-bottom:2px solid black;
width:10px;
height:10px;
top: calc(50% - 4px);
left: -20px;
transform: translateY(-50%) rotate(-45deg);
}<!-- Want to place arrow where bullet points are -->
<ul>
<li>Item #1</li>
<li>Item #2</li>
<li>Item #3</li>
<li>Item #4</li>
<li>Item #5</li>
</ul>Hope this helps!
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;
}
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"}
You could use li:before{ content:"....";} to make an arrow? Like this:
<ul>
<li>Disaster</li>
<ul>
<li>stuff</li>
<li>Stuff2</li>
</ul>
</ul>
CSS:
ul ul li:before {
content: "\2192 \0020";
}
ul ul {
list-style: none;
}
See it in function here, on this fiddle: http://jsfiddle.net/f9AzK/
Use li:before { content: ...; }
HTML
<ul>
<li>Disater Assistance Center Manager
<ul id="sub">
<li>San Jaun</li>
</ul>
</li>
</ul>
CSS
#sub { list-style:none; }
#sub li:before {
content: "\2192 \0020";
}
JSFiddle
Other special characters can be found here.