Styling Radio buttons underlining text

Question

So I'll have the texts: "The Oxford ....real examples" and the phrases that need to be underlined and having a radio option right below (in the picture there is no radio button, but I also need a radio button for users to select).

How can I achieve this with css and javascript?

Thank you all for helping.

Answer 1

I believe this is what you want:

　　http://jsfiddle.net/DerekL/NRpcn/

(I have used jQuery in my example just for simplicity)

var list = ["The", "well known", "meanings", "to give"];    //word list
var output = $("#output"),
    html = output.html();

for(var i = 0; i < list.length; i++) {
    //Wrap each keyword with <span>
    html = html.replace(new RegExp("(" + list[i] + ")", "i"), "<span>$1</span>");
}

output.html(html);

$("p>span").each(function (i) {              //Create the index for each one
    var x = $(this).offset().left,                  //Get the x
        y = $(this).offset().top,                   //Get the y
        width = +$(this).width(),                   //Get the width
        $select = $("<div>").addClass("select");

    $select.css({
        top: y + 20,
        left: x,
        width: width
    })
        .html(String.fromCharCode(65 + i))          //Set the index (A, B, C...)
        .appendTo("body");                          //Append it to the container
});

(The example will auto-recalculate the positions when you resize the window.)

This is one way to achieve it, and there're many other ways to do it. Personally I like this better because this isn't very complicated to understand.