Working with "a" tag title attributes

CMS & WordPress
1

I’m not sure if I’m posting this question in the right forum or not, so forgive me if it’s in the wrong place.

I have a WordPress site and for the links in the sidebar I have some jquery code that is causing the text of the “a” tag’s title attribute to appear below the link.

Here is the jquery code that is doing this:

//to add the title's text to the link.
			$("#sidebar").find("a").each(function() {
				$(this).after($(this).attr("title"));
			});

I attached an image of what my link looks like with the text from the title attribute showing under “Visiting Short Term”.

So my question is…I need that title attribute text to be indented more. How do I do that? Or does anyone have any other suggestions as to what I can do here? It’s nice to have the explanations there but they just don’t look quite right. But I have no idea how to change the way it looks because I can’t figure out what to add the css style to, to fix it. I’ve been working on this for about the last 4 hours and I just can’t figure out what to do. It’s a combination of not knowing jquery and not knowing what all I can do in WordPress or with PHP.

2

Can you provide some source code of the rendered page or a link?

3

Sure…here’s the link to the page: Visit the FTTA « FTTA

That text under the first link, which is the title text doesn’t even appear in the source code.

4

Anyone know of a way to style the text from the title attributes? Still have not figured this one out. Any help would be much appreciated.

5

I’m not sure I understand what you’re trying to accomplish.

You have a link with a title attribute. You have text included after the link. Why not just add it within the template’s/widget’s HTML/PHP code, surround it with a div or span, and use a class tag to style it with CSS?

You really shouldn’t be adding content with javascript.

6

Maybe you can figure out what unique selectors would style it and it alone?

		<div id="sidebar" role="complementary" class="span-7 border">
		<div>
		<div class="menu-visit-the-ftta-container"><ul id="menu-visit-the-ftta" class="menu"><li id="menu-item-546" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-13 current_page_item menu-item-546"><a title="Instructions for planning your visit." href="http://ftta.org/visit-the-ftta/visiting-short-term/">Visiting Short Term</a>
<ul class="sub-menu">
	<li id="menu-item-1453" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1453"><a href="http://ftta.org/ftta/wp-content/uploads/2011/07/ShortTermApplication.pdf">Short Term Application</a></li>
</ul>
</li>
7

That’s what I’d like to do. Be able to surround it with a div or span and use CSS to style it. But the problem is, I can’t figure out what element to add the style to. If you look at my source code:

<div id="sidebar" role="complementary" class="span-7 border">
		<div>
		<div class="menu-visit-the-ftta-container"><ul id="menu-visit-the-ftta" class="menu"><li id="menu-item-546" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-546"><a title="Instructions for planning your visit." href="http://ftta.org/visit-the-ftta/visiting-short-term/">Visiting Short Term</a>
<ul class="sub-menu">
	<li id="menu-item-1453" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1453"><a href="http://ftta.org/ftta/wp-content/uploads/2011/07/ShortTermApplication.pdf">Short Term Application</a></li>

</ul>
</li>

You’ll see that the only place that title text shows is in the title attribute. So how to I place something there like a handle to use to add style to? I can’t figure out what element to add style to. Does that make sense? It’s hard to explain. Like if I saw that the title attribute text was in a span or div after the a tag within the li, then I could just do something like

li span { padding-left:10px; }

and whatever other styles I want. But what do I add the css to??