Which element is the class "right-course" applied to in the HTML-- the ul or the li? I strongly suspect that what you're really aiming for is
ul.right-course {blahblah}
ul.right-course li {blahblah}
and then it would be
ul.right-course li:before {blahblah}

Putting things before a list-item is tricky, because there's all that hidden styling with padding and hanging indents and whatnot. Isn't there some way you can designate your content as a list-marker instead?

:: wandering off to look up what \f00c is ::

Oh, a Private Use Area. I kinda don't think I'd do that. Take a picture and set its size in CSS. Maybe a background-image would work better than a list-marker.

[edited by: lucy24 at 2:59 am (utc) on Mar 1, 2016]

Before is "psuedo state" something like hover and what it does is to enable the defined state before the element it is attached to. If you wanted a line of text before each <li class="right_course"> element, it would be added this way:

li.right-course::before

To give this group of <li> elements distinct properties, it needs to have its own class that is distinct from the class used where you don't want those properties.

For example, if you were to change this line in your css:

li.right-course:before

to

li .before

and change the html to

<li class="before">

then it would behave as you have defined it.

<div class="right-course">
<ul>
<li>Campaign Structure</li>
<li>Campaign Settings</li>
<li>Keyword Selection</li>
<li>Match Types</li>
<li>Ad copy writing</li>
</ul>
</div>

I got it to work but i'm sure the CSS and HTML extraneous code. What can I change to make it proper?

CSS

.right-course {
 margin-left:auto;
 margin-right:auto;
 width: 185px;
 font-family: sans-serif;
}

ul.right-course { 

 padding-left: 20px;

}

li.right-course {
 list-style-type: none;
 position: relative;
 padding-left: 20px;
 margin-bottom: 10px;
 margin-top: 10px;
}

li.right-course:before {
 position: absolute;
 top: 0;
 left: 0;
 font-family: FontAwesome;
 content: "\f00c";
 color:#f16924;
}

HTML

<div class="right-course">
<ul>
<li class="right-course">Campaign Structure</li>
<li class="right-course">Campaign Settings</li>
<li class="right-course">Keyword Selection</li>
<li class="right-course">Match Types</li>
<li class="right-course">Ad copy writing</li>
</ul>
</div>

<div class="right-course">
<ul>
<li>

Ah, option 3, which I hadn't even considered. So it's not just
.right-course
but
.right-course ul
and also
.right-course li

... and I have to say that assigning the same class name to two entirely different elements-- the containing div and then the individual list items-- is probably not going to yield the intended results in this situation. In particular, you're setting an explicit width on two different elements occupying two different levels of a hierarchy, which will be overkill at best. And margins on list-items can be hinky, especially on the left; you may need to work with padding instead.

Assigning the same classname-- any same classname-- to every single element within some larger group is almost always going to be wasted effort. That's what cascading is for: so you can say

div.right-course li

("all list items inside a div called right-course") and be done with it. Especially when the whole package is only going to occur once per page.

Why does there need to be a div.rightcourse containing a classless ul? Can't you proceed directly to ul.right-course?

It got this way because I don't know CSS very well. I got different things from websites and just played with it until it worked. It is currently working but is very ugly as you pointed out. I'm not sure what the proper way of doing this is.

I'd do it like this:

Throw out the div. Make a
ul.classname (CSS)
ul class = "classname" (HTML)
and, in the CSS, give it all that stuff about position and size.

Then, make CSS for
ul.classname li
You don't need to say anything more about positioning, because list items will always fit inside their containing list. I recommend setting explicit values for two aspects of a list-item: padding-left and text-indent (some negative number). Experiment until it looks the way you want. If you don't specify, the browser will make something up, and this is subject to change.

Now, instead of the :before business, set something like
ul.classname {list-style: disc outside url("images/mypicture.png");}
where "disc" is just a fallback in case the image gets lost. Take a picture of your pretty symbol at an appropriate size; that's the list marker.

If you want to get fancier, it would instead be "list-style: none" along with
ul.classname li {background-image: url("images/mypicture.png"); background-position: top left; background-repeat: no-repeat;}
and, if you particularly need its size to vary depending on the user's preferred font size, define its width and height in ems.

not2easy will come along presently and correct my wording, because the foregoing was off the top of my head.

The whole point of this was to use Awesome Font instead of an image to reduce the number of server calls and reduce load time.