If the string is unadorned, (i.e., without tags) either of these works well:
data = 'Main Idea, key term, key term, key term'
# example #1
/^(.+?, )(.+)/.match(data).captures.each_slice(2).map { |a,b| a << %Q{<span class="smaller_font">#{ b }</span>}}.first
# => "Main Idea, <span class=\"smaller_font\">key term, key term, key term</span>"
# example #2
data =~ /^(.+?, )(.+)/
$1 << %Q{<span class="smaller_font">#{ $2 }</span>}
# => "Main Idea, <span class=\"smaller_font\">key term, key term, key term</span>"
If the string has tags then using regex to process HTML or XML is discouraged because it breaks so easily. Extremely trivial uses against HTML you control is pretty safe but if the content or format changes the regex can fall apart breaking your code.
HTML parsers are the usual recommended solution because they will continue working if the content or its formatting changes. This is what I'd do using Nokogiri. I was deliberately verbose to explain what was going on:
require 'nokogiri'
# build a sample document
html = '<a href="stupidreqexquestion">Main Idea, key term, key term, key term</a>'
doc = Nokogiri::HTML(html)
puts doc.to_s, ''
# find the link
a_tag = doc.at_css('a[href=stupidreqexquestion]')
# break down the tag content
a_text = a_tag.content
main_idea, key_terms = a_text.split(/,\s+/, 2) # => ["Main Idea", "key term, key term, key term"]
a_tag.content = main_idea
# create a new node
span = Nokogiri::XML::Node.new('span', doc)
span['class'] = 'smaller_font'
span.content = key_terms
puts span.to_s, ''
# add it to the old node
a_tag.add_child(span)
puts doc.to_s
# >> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
# >> <html><body><a href="stupidreqexquestion">Main Idea, key term, key term, key term</a></body></html>
# >>
# >> <span class="smaller_font">key term, key term, key term</span>
# >>
# >> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
# >> <html><body><a href="stupidreqexquestion">Main Idea<span class="smaller_font">key term, key term, key term</span></a></body></html>
In the output above you can see how Nokogiri built the sample document, the span being added, and the resulting document.
It can be simplified to:
require 'nokogiri'
doc = Nokogiri::HTML('<a href="stupidreqexquestion">Main Idea, key term, key term, key term</a>')
a_tag = doc.at_css('a[href=stupidreqexquestion]')
main_idea, key_terms = a_tag.content.split(/,\s+/, 2)
a_tag.content = main_idea
a_tag.add_child("<span class='smaller_font'>#{ key_terms }</span>")
puts doc.to_s
# >> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
# >> <html><body><a href="stupidreqexquestion">Main Idea<span class="smaller_font">key term, key term, key term</span></a></body></html>