Question

After much head scratching and poking around I’ve come to a dead end.
I’m working on a site using Textpattern, which displays on the main page a Twitter feed.

The html that Textpattern spits out (in an unordered list) ends up generally looking like this:

<li>Some text @<a href="http://...">Username</a>: some more text here!
<span class="tweet-posted">Friday October 7, 2011</span>
</li>

and my problem is this:
The text in each <li> (of which there are several) is colored grey. The <a> text is colored a light blue to differentiate it from regular text.

What I want to do is color the @ symbol that precedes some of the links the same light blue, because to me it seems visually to be a part of the link (despite the fact the @ symbol is obviously not part of the clickable link).

I’ve tried using css to no avail – it doesn’t seem to me to be possible to select a specific character in css – and also tried jQuery, but I’m a novice in that regard and not having any luck.

Unfortunately, because that particular text is being sent to Textpattern by Twitter I don’t have any control over the way it is formatted. Obviously it would be ideal if the @ symbol was contained inside the link, but it’s not possible.

Lastly, if it’s at all helpful, the markup for the particular div (with several of the list items having the above problem) is as follows:

<div id="twitter">
  <ul id="tweets">
     <li>Some text @<a href="http://...">Username</a>: some more text here!
         <span class="tweet-posted">Friday October 7, 2011</span></li>
     <li></li>
     <li></li>
</ul>
</div>

Any help would be greatly appreciated!

Answer 1

Use this code to move the @ to inside the link:

$("#tweets").html(function(){
    return $(this).html().replace(/@(<a href=[^>]+?>)/g, "$1@");
});

Fiddle: http://jsfiddle.net/9M5XZ/