Wrap span to text within div - 【StackMirror】|jquery|css|border

I'm trying to add a bottom border to a title thats wrapped within a div but it affects the whole block.

<div class="title">I'm a title</div>

and my CSS

.title {border-bottom: 2px solid #000; padding-bottom: 3px;}

Is the best way to apply this border to the text?

Wrapping a span around the text would be ideal. But I can't access the HTML.

<div class="title">
<span class="border">I'm a title</span>
</div>

How would I wrap the text with a span using Jquery.

I'm trying

$(".title").wrap('<span></span>');

Or is there another way to add this CSS?

Thanks

2012-04-04 03:09
by uriah

"...How would I wrap the text with a span using Jquery."

This should answer your question:

<html>
<head runat="server">
    <title></title>

    <style>
        .border {border-bottom: 2px solid #000; padding-bottom: 3px;}
    </style>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.title').each(function(index) { 
                $(this).html("<span class='border'>" + $(this).html() + "</span>");
            });
        });
    </script>

</head>
<body runat="server">
    <div class="title" style="text-align: center">I'm a title</div>
</body>
</html>

2012-04-04 03:38
by RichardB

Bingo that you very much. I need to learn more about getting the .html in jquery - uriah 2012-04-04 04:34

JQuery has some very cool APIs. I've only used about 20 percent of JQuery's functionality, so don't feel intimidated - RichardB 2012-04-04 04:47

.title {border-bottom: 2px solid #000; padding-bottom: 3px; display: inline;}

2012-04-04 03:13
by chadpeppers

This works, but I can't center the text as well - uriah 2012-04-04 03:16

Depending on how fancy you want to get, you could get the effect you're after by setting text-decoration:underline (MDN)

That's not a true border per se, but if you are unable to modify html this may be your only option

2012-04-04 03:14
by o.v.